diff --git a/package-lock.json b/package-lock.json
index ee8f45c..613dc41 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,7 @@
         "@radix-ui/react-select": "^2.2.5",
         "@radix-ui/react-slot": "^1.2.3",
         "@radix-ui/react-tabs": "^1.1.12",
+        "@tldraw/tldraw": "^3.15.4",
         "axios": "^1.11.0",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
@@ -27,6 +28,7 @@
         "next": "15.4.6",
         "react": "19.1.0",
         "react-dom": "19.1.0",
+        "svg-path-parser": "^1.1.0",
         "tailwind-merge": "^3.3.1",
         "zustand": "^5.0.8"
       },
@@ -36,6 +38,7 @@
         "@types/node": "^20",
         "@types/react": "^19",
         "@types/react-dom": "^19",
+        "@types/svg-path-parser": "^1.1.6",
         "eslint": "^9",
         "eslint-config-next": "15.4.6",
         "tailwindcss": "^4",
@@ -1041,6 +1044,16 @@
         "node": ">=12.4.0"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@radix-ui/number": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.1.1.tgz",
@@ -1048,11 +1061,93 @@
       "license": "MIT"
     },
     "node_modules/@radix-ui/primitive": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.2.tgz",
-      "integrity": "sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA==",
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz",
+      "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==",
       "license": "MIT"
     },
+    "node_modules/@radix-ui/react-accessible-icon": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-accessible-icon/-/react-accessible-icon-1.1.7.tgz",
+      "integrity": "sha512-XM+E4WXl0OqUJFovy6GjmxxFyx9opfCAIUku4dlKRd5YEPqt4kALOkQOp0Of6reHuUkJuiPBEc5k0o4z4lTC8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-visually-hidden": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-accordion": {
+      "version": "1.2.12",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-accordion/-/react-accordion-1.2.12.tgz",
+      "integrity": "sha512-T4nygeh9YE9dLRPhAHSeOZi7HBXo+0kYIPJXayZfvWOWA0+n3dESrZbjfDPUABkUNym6Hd+f2IR113To8D2GPA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collapsible": "1.1.12",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-alert-dialog": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-alert-dialog/-/react-alert-dialog-1.1.15.tgz",
+      "integrity": "sha512-oTVLkEw5GpdRe29BqJ0LSDFWI3qu0vR1M0mUkOQWDIUnY/QIkLpgDMWuKxP94c2NAC2LGcgVhG1ImF3jkZ5wXw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dialog": "1.1.15",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-arrow": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.7.tgz",
@@ -1076,6 +1171,29 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-aspect-ratio": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-aspect-ratio/-/react-aspect-ratio-1.1.7.tgz",
+      "integrity": "sha512-Yq6lvO9HQyPwev1onK1daHCHqXVLzPhSVjmsNjCa2Zcxy2f7uJD2itDtxknv6FzAKCwD1qQkeVDmX/cev13n/g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-avatar": {
       "version": "1.1.10",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-avatar/-/react-avatar-1.1.10.tgz",
@@ -1104,15 +1222,15 @@
       }
     },
     "node_modules/@radix-ui/react-checkbox": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.3.2.tgz",
-      "integrity": "sha512-yd+dI56KZqawxKZrJ31eENUwqc1QSqg4OZ15rybGjF2ZNwMO+wCyHzAVLRp9qoYJf7kYy0YpZ2b0JCzJ42HZpA==",
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.3.3.tgz",
+      "integrity": "sha512-wBbpv+NQftHDdG86Qc0pIyXk5IR3tM8Vd0nWLKDcX8nNn4nXFOFwsKuqw2okA/1D/mpaAkmuyndrPJTYDNZtFw==",
       "license": "MIT",
       "dependencies": {
-        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/primitive": "1.1.3",
         "@radix-ui/react-compose-refs": "1.1.2",
         "@radix-ui/react-context": "1.1.2",
-        "@radix-ui/react-presence": "1.1.4",
+        "@radix-ui/react-presence": "1.1.5",
         "@radix-ui/react-primitive": "2.1.3",
         "@radix-ui/react-use-controllable-state": "1.2.2",
         "@radix-ui/react-use-previous": "1.1.1",
@@ -1133,6 +1251,36 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-collapsible": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.12.tgz",
+      "integrity": "sha512-Uu+mSh4agx2ib1uIGPP4/CKNULyajb3p92LsVXmH2EHVMTfZWpll88XJ0j4W0z3f8NK1eYl1+Mf/szHPmcHzyA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-collection": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz",
@@ -1189,6 +1337,34 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-context-menu": {
+      "version": "2.2.16",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context-menu/-/react-context-menu-2.2.16.tgz",
+      "integrity": "sha512-O8morBEW+HsVG28gYDZPTrT9UUovQUlJue5YO836tiTJhuIWBm/zQHc7j388sHWtdH/xUZurK9olD2+pcqx5ww==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-menu": "2.1.16",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-dialog": {
       "version": "1.1.15",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.15.tgz",
@@ -1225,13 +1401,22 @@
         }
       }
     },
-    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/primitive": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz",
-      "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==",
-      "license": "MIT"
+    "node_modules/@radix-ui/react-direction": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.1.tgz",
+      "integrity": "sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
     },
-    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-dismissable-layer": {
+    "node_modules/@radix-ui/react-dismissable-layer": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.11.tgz",
       "integrity": "sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg==",
@@ -1258,98 +1443,17 @@
         }
       }
     },
-    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-focus-guards": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.3.tgz",
-      "integrity": "sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw==",
-      "license": "MIT",
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-presence": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.5.tgz",
-      "integrity": "sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/react-compose-refs": "1.1.2",
-        "@radix-ui/react-use-layout-effect": "1.1.1"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-direction": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.1.tgz",
-      "integrity": "sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==",
-      "license": "MIT",
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@radix-ui/react-dismissable-layer": {
-      "version": "1.1.10",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.10.tgz",
-      "integrity": "sha512-IM1zzRV4W3HtVgftdQiiOmA0AdJlCtMLe00FXaHwgt3rAnNsIyDqshvkIW3hj/iu5hu8ERP7KIYki6NkqDxAwQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@radix-ui/primitive": "1.1.2",
-        "@radix-ui/react-compose-refs": "1.1.2",
-        "@radix-ui/react-primitive": "2.1.3",
-        "@radix-ui/react-use-callback-ref": "1.1.1",
-        "@radix-ui/react-use-escape-keydown": "1.1.1"
-      },
-      "peerDependencies": {
-        "@types/react": "*",
-        "@types/react-dom": "*",
-        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "@types/react-dom": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@radix-ui/react-dropdown-menu": {
-      "version": "2.1.15",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.1.15.tgz",
-      "integrity": "sha512-mIBnOjgwo9AH3FyKaSWoSu/dYj6VdhJ7frEPiGTeXCdUFHjl9h3mFh2wwhEtINOmYXWhdpf1rY2minFsmaNgVQ==",
+      "version": "2.1.16",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.1.16.tgz",
+      "integrity": "sha512-1PLGQEynI/3OX/ftV54COn+3Sud/Mn8vALg2rWnBLnRaGtJDduNW/22XjlGgPdpcIbiQxjKtb7BkcjP00nqfJw==",
       "license": "MIT",
       "dependencies": {
-        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/primitive": "1.1.3",
         "@radix-ui/react-compose-refs": "1.1.2",
         "@radix-ui/react-context": "1.1.2",
         "@radix-ui/react-id": "1.1.1",
-        "@radix-ui/react-menu": "2.1.15",
+        "@radix-ui/react-menu": "2.1.16",
         "@radix-ui/react-primitive": "2.1.3",
         "@radix-ui/react-use-controllable-state": "1.2.2"
       },
@@ -1369,9 +1473,9 @@
       }
     },
     "node_modules/@radix-ui/react-focus-guards": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.2.tgz",
-      "integrity": "sha512-fyjAACV62oPV925xFCrH8DR5xWhg9KYtJT4s3u54jxp+L/hbpTY2kIeEFFbFe+a/HCE94zGQMZLIpVTPVZDhaA==",
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.3.tgz",
+      "integrity": "sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw==",
       "license": "MIT",
       "peerDependencies": {
         "@types/react": "*",
@@ -1408,6 +1512,65 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-form": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-form/-/react-form-0.1.8.tgz",
+      "integrity": "sha512-QM70k4Zwjttifr5a4sZFts9fn8FzHYvQ5PiB19O2HsYibaHSVt9fH9rzB0XZo/YcM+b7t/p7lYCT/F5eOeF5yQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-label": "2.1.7",
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-hover-card": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-hover-card/-/react-hover-card-1.1.15.tgz",
+      "integrity": "sha512-qgTkjNT1CfKMoP0rcasmlH2r1DAiYicWsDsufxl940sT2wHNEWWv6FMWIQXWhVdmC1d/HYfbhQx60KYyAtKxjg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-popper": "1.2.8",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-id": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.1.tgz",
@@ -1450,25 +1613,25 @@
       }
     },
     "node_modules/@radix-ui/react-menu": {
-      "version": "2.1.15",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.15.tgz",
-      "integrity": "sha512-tVlmA3Vb9n8SZSd+YSbuFR66l87Wiy4du+YE+0hzKQEANA+7cWKH1WgqcEX4pXqxUFQKrWQGHdvEfw00TjFiew==",
+      "version": "2.1.16",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.16.tgz",
+      "integrity": "sha512-72F2T+PLlphrqLcAotYPp0uJMr5SjP5SL01wfEspJbru5Zs5vQaSHb4VB3ZMJPimgHHCHG7gMOeOB9H3Hdmtxg==",
       "license": "MIT",
       "dependencies": {
-        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/primitive": "1.1.3",
         "@radix-ui/react-collection": "1.1.7",
         "@radix-ui/react-compose-refs": "1.1.2",
         "@radix-ui/react-context": "1.1.2",
         "@radix-ui/react-direction": "1.1.1",
-        "@radix-ui/react-dismissable-layer": "1.1.10",
-        "@radix-ui/react-focus-guards": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-focus-guards": "1.1.3",
         "@radix-ui/react-focus-scope": "1.1.7",
         "@radix-ui/react-id": "1.1.1",
-        "@radix-ui/react-popper": "1.2.7",
+        "@radix-ui/react-popper": "1.2.8",
         "@radix-ui/react-portal": "1.1.9",
-        "@radix-ui/react-presence": "1.1.4",
+        "@radix-ui/react-presence": "1.1.5",
         "@radix-ui/react-primitive": "2.1.3",
-        "@radix-ui/react-roving-focus": "1.1.10",
+        "@radix-ui/react-roving-focus": "1.1.11",
         "@radix-ui/react-slot": "1.2.3",
         "@radix-ui/react-use-callback-ref": "1.1.1",
         "aria-hidden": "^1.2.4",
@@ -1489,10 +1652,179 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-menubar": {
+      "version": "1.1.16",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-menubar/-/react-menubar-1.1.16.tgz",
+      "integrity": "sha512-EB1FktTz5xRRi2Er974AUQZWg2yVBb1yjip38/lgwtCVRd3a+maUoGHN/xs9Yv8SY8QwbSEb+YrxGadVWbEutA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-menu": "2.1.16",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-navigation-menu": {
+      "version": "1.2.14",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-navigation-menu/-/react-navigation-menu-1.2.14.tgz",
+      "integrity": "sha512-YB9mTFQvCOAQMHU+C/jVl96WmuWeltyUEpRJJky51huhds5W2FQr1J8D/16sQlf0ozxkPK8uF3niQMdUwZPv5w==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-visually-hidden": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-one-time-password-field": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-one-time-password-field/-/react-one-time-password-field-0.1.8.tgz",
+      "integrity": "sha512-ycS4rbwURavDPVjCb5iS3aG4lURFDILi6sKI/WITUMZ13gMmn/xGjpLoqBAalhJaDk8I3UbCM5GzKHrnzwHbvg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.1",
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-effect-event": "0.0.2",
+        "@radix-ui/react-use-is-hydrated": "0.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-password-toggle-field": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-password-toggle-field/-/react-password-toggle-field-0.1.3.tgz",
+      "integrity": "sha512-/UuCrDBWravcaMix4TdT+qlNdVwOM1Nck9kWx/vafXsdfj1ChfhOdfi3cy9SGBpWgTXwYCuboT/oYpJy3clqfw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-effect-event": "0.0.2",
+        "@radix-ui/react-use-is-hydrated": "0.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popover": {
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.15.tgz",
+      "integrity": "sha512-kr0X2+6Yy/vJzLYJUPCZEc8SfQcf+1COFoAqauJm74umQhta9M7lNJHP7QQS3vkvcGLQUbWpMzwrXYwrYztHKA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-focus-guards": "1.1.3",
+        "@radix-ui/react-focus-scope": "1.1.7",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-popper": "1.2.8",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-popper": {
-      "version": "1.2.7",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.7.tgz",
-      "integrity": "sha512-IUFAccz1JyKcf/RjB552PlWwxjeCJB8/4KxT7EhBHOJM+mN7LdW+B3kacJXILm32xawcMMjb2i0cIZpo+f9kiQ==",
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.8.tgz",
+      "integrity": "sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==",
       "license": "MIT",
       "dependencies": {
         "@floating-ui/react-dom": "^2.0.0",
@@ -1546,9 +1878,9 @@
       }
     },
     "node_modules/@radix-ui/react-presence": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.4.tgz",
-      "integrity": "sha512-ueDqRbdc4/bkaQT3GIpLQssRlFgWaL/U2z/S31qRwwLWoxHLgry3SIfCwhxeQNbirEUXFa+lq3RL3oBYXtcmIA==",
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.5.tgz",
+      "integrity": "sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/react-compose-refs": "1.1.2",
@@ -1617,18 +1949,18 @@
       }
     },
     "node_modules/@radix-ui/react-radio-group": {
-      "version": "1.3.7",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-radio-group/-/react-radio-group-1.3.7.tgz",
-      "integrity": "sha512-9w5XhD0KPOrm92OTTE0SysH3sYzHsSTHNvZgUBo/VZ80VdYyB5RneDbc0dKpURS24IxkoFRu/hI0i4XyfFwY6g==",
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-radio-group/-/react-radio-group-1.3.8.tgz",
+      "integrity": "sha512-VBKYIYImA5zsxACdisNQ3BjCBfmbGH3kQlnFVqlWU4tXwjy7cGX8ta80BcrO+WJXIn5iBylEH3K6ZTlee//lgQ==",
       "license": "MIT",
       "dependencies": {
-        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/primitive": "1.1.3",
         "@radix-ui/react-compose-refs": "1.1.2",
         "@radix-ui/react-context": "1.1.2",
         "@radix-ui/react-direction": "1.1.1",
-        "@radix-ui/react-presence": "1.1.4",
+        "@radix-ui/react-presence": "1.1.5",
         "@radix-ui/react-primitive": "2.1.3",
-        "@radix-ui/react-roving-focus": "1.1.10",
+        "@radix-ui/react-roving-focus": "1.1.11",
         "@radix-ui/react-use-controllable-state": "1.2.2",
         "@radix-ui/react-use-previous": "1.1.1",
         "@radix-ui/react-use-size": "1.1.1"
@@ -1649,12 +1981,12 @@
       }
     },
     "node_modules/@radix-ui/react-roving-focus": {
-      "version": "1.1.10",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.10.tgz",
-      "integrity": "sha512-dT9aOXUen9JSsxnMPv/0VqySQf5eDQ6LCk5Sw28kamz8wSOW2bJdlX2Bg5VUIIcV+6XlHpWTIuTPCf/UNIyq8Q==",
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.11.tgz",
+      "integrity": "sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA==",
       "license": "MIT",
       "dependencies": {
-        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/primitive": "1.1.3",
         "@radix-ui/react-collection": "1.1.7",
         "@radix-ui/react-compose-refs": "1.1.2",
         "@radix-ui/react-context": "1.1.2",
@@ -1679,23 +2011,54 @@
         }
       }
     },
-    "node_modules/@radix-ui/react-select": {
-      "version": "2.2.5",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.2.5.tgz",
-      "integrity": "sha512-HnMTdXEVuuyzx63ME0ut4+sEMYW6oouHWNGUZc7ddvUWIcfCva/AMoqEW/3wnEllriMWBa0RHspCYnfCWJQYmA==",
+    "node_modules/@radix-ui/react-scroll-area": {
+      "version": "1.2.10",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-scroll-area/-/react-scroll-area-1.2.10.tgz",
+      "integrity": "sha512-tAXIa1g3sM5CGpVT0uIbUx/U3Gs5N8T52IICuCtObaos1S8fzsrPXG5WObkQN3S6NVl6wKgPhAIiBGbWnvc97A==",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/number": "1.1.1",
-        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-select": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.2.6.tgz",
+      "integrity": "sha512-I30RydO+bnn2PQztvo25tswPH+wFBjehVGtmagkU78yMdwTwVf12wnAOF+AeP8S2N8xD+5UPbGhkUfPyvT+mwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.1",
+        "@radix-ui/primitive": "1.1.3",
         "@radix-ui/react-collection": "1.1.7",
         "@radix-ui/react-compose-refs": "1.1.2",
         "@radix-ui/react-context": "1.1.2",
         "@radix-ui/react-direction": "1.1.1",
-        "@radix-ui/react-dismissable-layer": "1.1.10",
-        "@radix-ui/react-focus-guards": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-focus-guards": "1.1.3",
         "@radix-ui/react-focus-scope": "1.1.7",
         "@radix-ui/react-id": "1.1.1",
-        "@radix-ui/react-popper": "1.2.7",
+        "@radix-ui/react-popper": "1.2.8",
         "@radix-ui/react-portal": "1.1.9",
         "@radix-ui/react-primitive": "2.1.3",
         "@radix-ui/react-slot": "1.2.3",
@@ -1722,6 +2085,62 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-separator": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.7.tgz",
+      "integrity": "sha512-0HEb8R9E8A+jZjvmFCy/J4xhbXy3TV+9XSnGJ3KvTtjlIUy/YQ/p6UYZvi7YbeoeXdyU9+Y3scizK6hkY37baA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slider": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slider/-/react-slider-1.3.6.tgz",
+      "integrity": "sha512-JPYb1GuM1bxfjMRlNLE+BcmBC8onfCi60Blk7OBqi2MLTFdS+8401U4uFjnwkOr49BLmXxLC6JHkvAsx5OJvHw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.1",
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-slot": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
@@ -1740,19 +2159,48 @@
         }
       }
     },
-    "node_modules/@radix-ui/react-tabs": {
-      "version": "1.1.12",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.1.12.tgz",
-      "integrity": "sha512-GTVAlRVrQrSw3cEARM0nAx73ixrWDPNZAruETn3oHCNP6SbZ/hNxdxp+u7VkIEv3/sFoLq1PfcHrl7Pnp0CDpw==",
+    "node_modules/@radix-ui/react-switch": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.2.6.tgz",
+      "integrity": "sha512-bByzr1+ep1zk4VubeEVViV592vu2lHE2BZY5OnzehZqOOgogN80+mNtCqPkhn2gklJqOpxWgPoYTSnhBCqpOXQ==",
       "license": "MIT",
       "dependencies": {
-        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-previous": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tabs": {
+      "version": "1.1.13",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.1.13.tgz",
+      "integrity": "sha512-7xdcatg7/U+7+Udyoj2zodtI9H/IIopqo+YOIcZOq1nJwXWBZ9p8xiu5llXlekDbZkca79a/fozEYQXIA4sW6A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
         "@radix-ui/react-context": "1.1.2",
         "@radix-ui/react-direction": "1.1.1",
         "@radix-ui/react-id": "1.1.1",
-        "@radix-ui/react-presence": "1.1.4",
+        "@radix-ui/react-presence": "1.1.5",
         "@radix-ui/react-primitive": "2.1.3",
-        "@radix-ui/react-roving-focus": "1.1.10",
+        "@radix-ui/react-roving-focus": "1.1.11",
         "@radix-ui/react-use-controllable-state": "1.2.2"
       },
       "peerDependencies": {
@@ -1770,6 +2218,157 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-toast": {
+      "version": "1.2.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toast/-/react-toast-1.2.15.tgz",
+      "integrity": "sha512-3OSz3TacUWy4WtOXV38DggwxoqJK4+eDkNMl5Z/MJZaoUPaP4/9lf81xXMe1I2ReTAptverZUpbPY4wWwWyL5g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-visually-hidden": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle": {
+      "version": "1.1.10",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle/-/react-toggle-1.1.10.tgz",
+      "integrity": "sha512-lS1odchhFTeZv3xwHH31YPObmJn8gOg7Lq12inrr0+BH/l3Tsq32VfjqH1oh80ARM3mlkfMic15n0kg4sD1poQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toggle-group": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle-group/-/react-toggle-group-1.1.11.tgz",
+      "integrity": "sha512-5umnS0T8JQzQT6HbPyO7Hh9dgd82NmS36DQr+X/YJ9ctFNCiiQd6IJAYYZ33LUwm8M+taCz5t2ui29fHZc4Y6Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-toggle": "1.1.10",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toolbar": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toolbar/-/react-toolbar-1.1.11.tgz",
+      "integrity": "sha512-4ol06/1bLoFu1nwUqzdD4Y5RZ9oDdKeiHIsntug54Hcr1pgaHiPqHFEaXI1IFP/EsOfROQZ8Mig9VTIRza6Tjg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-separator": "1.1.7",
+        "@radix-ui/react-toggle-group": "1.1.11"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-tooltip": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.2.8.tgz",
+      "integrity": "sha512-tY7sVt1yL9ozIxvmbtN5qtmH2krXcBCfjEiCgKGLqunJHvgvZG2Pcl2oQ3kbcZARb1BGEHdkLzcYGO8ynVlieg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-popper": "1.2.8",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-visually-hidden": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-callback-ref": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz",
@@ -1953,6 +2552,12 @@
       "integrity": "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==",
       "license": "MIT"
     },
+    "node_modules/@remirror/core-constants": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@remirror/core-constants/-/core-constants-3.0.0.tgz",
+      "integrity": "sha512-42aWfPrimMfDKDi4YegyS7x+/0tlzaqwPQCULLanv3DMIlu96KTJR0fM5isWX2UViOqlGnX6YFgqWepcX+XMNg==",
+      "license": "MIT"
+    },
     "node_modules/@rtsao/scc": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
@@ -2252,6 +2857,536 @@
         "tailwindcss": "4.1.11"
       }
     },
+    "node_modules/@tiptap/core": {
+      "version": "2.26.1",
+      "resolved": "https://registry.npmjs.org/@tiptap/core/-/core-2.26.1.tgz",
+      "integrity": "sha512-fymyd/XZvYiHjBoLt1gxs024xP/LY26d43R1vluYq7AHBL/7DE3ywzy+1GEsGyAv5Je2L0KBhNIR/izbq3Kaqg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/pm": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-blockquote": {
+      "version": "2.26.1",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-blockquote/-/extension-blockquote-2.26.1.tgz",
+      "integrity": "sha512-viQ6AHRhjCYYipKK6ZepBzwZpkuMvO9yhRHeUZDvlSOAh8rvsUTSre0y74nu8QRYUt4a44lJJ6BpphJK7bEgYA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-bold": {
+      "version": "2.26.1",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-bold/-/extension-bold-2.26.1.tgz",
+      "integrity": "sha512-zCce9PRuTNhadFir71luLo99HERDpGJ0EEflGm7RN8I1SnNi9gD5ooK42BOIQtejGCJqg3hTPZiYDJC2hXvckQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-bubble-menu": {
+      "version": "2.26.1",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-bubble-menu/-/extension-bubble-menu-2.26.1.tgz",
+      "integrity": "sha512-oHevUcZbTMFOTpdCEo4YEDe044MB4P1ZrWyML8CGe5tnnKdlI9BN03AXpI1mEEa5CA3H1/eEckXx8EiCgYwQ3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "tippy.js": "^6.3.7"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0",
+        "@tiptap/pm": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-bullet-list": {
+      "version": "2.26.1",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-bullet-list/-/extension-bullet-list-2.26.1.tgz",
+      "integrity": "sha512-HHakuV4ckYCDOnBbne088FvCEP4YICw+wgPBz/V2dfpiFYQ4WzT0LPK9s7OFMCN+ROraoug+1ryN1Z1KdIgujQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-code": {
+      "version": "2.26.1",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-code/-/extension-code-2.26.1.tgz",
+      "integrity": "sha512-GU9deB1A/Tr4FMPu71CvlcjGKwRhGYz60wQ8m4aM+ELZcVIcZRa1ebR8bExRIEWnvRztQuyRiCQzw2N0xQJ1QQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-code-block": {
+      "version": "2.26.1",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-code-block/-/extension-code-block-2.26.1.tgz",
+      "integrity": "sha512-/TDDOwONl0qEUc4+B6V9NnWtSjz95eg7/8uCb8Y8iRbGvI9vT4/znRKofFxstvKmW4URu/H74/g0ywV57h0B+A==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0",
+        "@tiptap/pm": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-document": {
+      "version": "2.26.1",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-document/-/extension-document-2.26.1.tgz",
+      "integrity": "sha512-2P2IZp1NRAE+21mRuFBiP3X2WKfZ6kUC23NJKpn8bcOamY3obYqCt0ltGPhE4eR8n8QAl2fI/3jIgjR07dC8ow==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-dropcursor": {
+      "version": "2.26.1",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-dropcursor/-/extension-dropcursor-2.26.1.tgz",
+      "integrity": "sha512-JkDQU2ZYFOuT5mNYb8OiWGwD1HcjbtmX8tLNugQbToECmz9WvVPqJmn7V/q8VGpP81iEECz/IsyRmuf2kSD4uA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0",
+        "@tiptap/pm": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-floating-menu": {
+      "version": "2.26.1",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-floating-menu/-/extension-floating-menu-2.26.1.tgz",
+      "integrity": "sha512-OJF+H6qhQogVTMedAGSWuoL1RPe3LZYXONuFCVyzHnvvMpK+BP1vm180E2zDNFnn/DVA+FOrzNGpZW7YjoFH1w==",
+      "license": "MIT",
+      "dependencies": {
+        "tippy.js": "^6.3.7"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0",
+        "@tiptap/pm": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-gapcursor": {
+      "version": "2.26.1",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-gapcursor/-/extension-gapcursor-2.26.1.tgz",
+      "integrity": "sha512-KOiMZc3PwJS3hR0nSq5d0TJi2jkNZkLZElcT6pCEnhRHzPH6dRMu9GM5Jj798ZRUy0T9UFcKJalFZaDxnmRnpg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0",
+        "@tiptap/pm": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-hard-break": {
+      "version": "2.26.1",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-hard-break/-/extension-hard-break-2.26.1.tgz",
+      "integrity": "sha512-d6uStdNKi8kjPlHAyO59M6KGWATNwhLCD7dng0NXfwGndc22fthzIk/6j9F6ltQx30huy5qQram6j3JXwNACoA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-heading": {
+      "version": "2.26.1",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-heading/-/extension-heading-2.26.1.tgz",
+      "integrity": "sha512-KSzL8WZV3pjJG9ke4RaU70+B5UlYR2S6olNt5UCAawM+fi11mobVztiBoC19xtpSVqIXC1AmXOqUgnuSvmE4ZA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-highlight": {
+      "version": "2.26.1",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-highlight/-/extension-highlight-2.26.1.tgz",
+      "integrity": "sha512-9eW2UqDqeAKSDIiL6SqcPSDCQAdU5qQmRMsJlShOM7Fu1aU71b1ewhUP9YioUCanciR99tqNsk/n3LAe0w5XdA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-history": {
+      "version": "2.26.1",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-history/-/extension-history-2.26.1.tgz",
+      "integrity": "sha512-m6YR1gkkauIDo3PRl0gP+7Oc4n5OqDzcjVh6LvWREmZP8nmi94hfseYbqOXUb6RPHIc0JKF02eiRifT4MSd2nw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0",
+        "@tiptap/pm": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-horizontal-rule": {
+      "version": "2.26.1",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-horizontal-rule/-/extension-horizontal-rule-2.26.1.tgz",
+      "integrity": "sha512-mT6baqOhs/NakgrAeDeed194E/ZJFGL692H0C7f1N7WDRaWxUu2oR0LrnRqSH5OyPjELkzu6nQnNy0+0tFGHHg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0",
+        "@tiptap/pm": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-italic": {
+      "version": "2.26.1",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-italic/-/extension-italic-2.26.1.tgz",
+      "integrity": "sha512-pOs6oU4LyGO89IrYE4jbE8ZYsPwMMIiKkYfXcfeD9NtpGNBnjeVXXF5I9ndY2ANrCAgC8k58C3/powDRf0T2yA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-link": {
+      "version": "2.26.1",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-link/-/extension-link-2.26.1.tgz",
+      "integrity": "sha512-7yfum5Jymkue/uOSTQPt2SmkZIdZx7t3QhZLqBU7R9ettkdSCBgEGok6N+scJM1R1Zes+maSckLm0JZw5BKYNA==",
+      "license": "MIT",
+      "dependencies": {
+        "linkifyjs": "^4.2.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0",
+        "@tiptap/pm": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-list-item": {
+      "version": "2.26.1",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-list-item/-/extension-list-item-2.26.1.tgz",
+      "integrity": "sha512-quOXckC73Luc3x+Dcm88YAEBW+Crh3x5uvtQOQtn2GEG91AshrvbnhGRiYnfvEN7UhWIS+FYI5liHFcRKSUKrQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-ordered-list": {
+      "version": "2.26.1",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-ordered-list/-/extension-ordered-list-2.26.1.tgz",
+      "integrity": "sha512-UHKNRxq6TBnXMGFSq91knD6QaHsyyOwLOsXMzupmKM5Su0s+CRXEjfav3qKlbb9e4m7D7S/a0aPm8nC9KIXNhQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-paragraph": {
+      "version": "2.26.1",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-paragraph/-/extension-paragraph-2.26.1.tgz",
+      "integrity": "sha512-UezvM9VDRAVJlX1tykgHWSD1g3MKfVMWWZ+Tg+PE4+kizOwoYkRWznVPgCAxjmyHajxpCKRXgqTZkOxjJ9Kjzg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-strike": {
+      "version": "2.26.1",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-strike/-/extension-strike-2.26.1.tgz",
+      "integrity": "sha512-CkoRH+pAi6MgdCh7K0cVZl4N2uR4pZdabXAnFSoLZRSg6imLvEUmWHfSi1dl3Z7JOvd3a4yZ4NxerQn5MWbJ7g==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-text": {
+      "version": "2.26.1",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-text/-/extension-text-2.26.1.tgz",
+      "integrity": "sha512-p2n8WVMd/2vckdJlol24acaTDIZAhI7qle5cM75bn01sOEZoFlSw6SwINOULrUCzNJsYb43qrLEibZb4j2LeQw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/extension-text-style": {
+      "version": "2.26.1",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-text-style/-/extension-text-style-2.26.1.tgz",
+      "integrity": "sha512-t9Nc/UkrbCfnSHEUi1gvUQ2ZPzvfdYFT5TExoV2DTiUCkhG6+mecT5bTVFGW3QkPmbToL+nFhGn4ZRMDD0SP3Q==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0"
+      }
+    },
+    "node_modules/@tiptap/pm": {
+      "version": "2.26.1",
+      "resolved": "https://registry.npmjs.org/@tiptap/pm/-/pm-2.26.1.tgz",
+      "integrity": "sha512-8aF+mY/vSHbGFqyG663ds84b+vca5Lge3tHdTMTKazxCnhXR9dn2oQJMnZ78YZvdRbkPkMJJHti9h3K7u2UQvw==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-changeset": "^2.3.0",
+        "prosemirror-collab": "^1.3.1",
+        "prosemirror-commands": "^1.6.2",
+        "prosemirror-dropcursor": "^1.8.1",
+        "prosemirror-gapcursor": "^1.3.2",
+        "prosemirror-history": "^1.4.1",
+        "prosemirror-inputrules": "^1.4.0",
+        "prosemirror-keymap": "^1.2.2",
+        "prosemirror-markdown": "^1.13.1",
+        "prosemirror-menu": "^1.2.4",
+        "prosemirror-model": "^1.23.0",
+        "prosemirror-schema-basic": "^1.2.3",
+        "prosemirror-schema-list": "^1.4.1",
+        "prosemirror-state": "^1.4.3",
+        "prosemirror-tables": "^1.6.4",
+        "prosemirror-trailing-node": "^3.0.0",
+        "prosemirror-transform": "^1.10.2",
+        "prosemirror-view": "^1.37.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      }
+    },
+    "node_modules/@tiptap/react": {
+      "version": "2.26.1",
+      "resolved": "https://registry.npmjs.org/@tiptap/react/-/react-2.26.1.tgz",
+      "integrity": "sha512-Zxlwzi1iML7aELa+PyysFD2ncVo2mEcjTkhoDok9iTbMGpm1oU8hgR1i6iHrcSNQLfaRiW6M7HNhZZQPKIC9yw==",
+      "license": "MIT",
+      "dependencies": {
+        "@tiptap/extension-bubble-menu": "^2.26.1",
+        "@tiptap/extension-floating-menu": "^2.26.1",
+        "@types/use-sync-external-store": "^0.0.6",
+        "fast-deep-equal": "^3",
+        "use-sync-external-store": "^1"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.7.0",
+        "@tiptap/pm": "^2.7.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@tiptap/starter-kit": {
+      "version": "2.26.1",
+      "resolved": "https://registry.npmjs.org/@tiptap/starter-kit/-/starter-kit-2.26.1.tgz",
+      "integrity": "sha512-oziMGCds8SVQ3s5dRpBxVdEKZAmO/O//BjZ69mhA3q4vJdR0rnfLb5fTxSeQvHiqB878HBNn76kNaJrHrV35GA==",
+      "license": "MIT",
+      "dependencies": {
+        "@tiptap/core": "^2.26.1",
+        "@tiptap/extension-blockquote": "^2.26.1",
+        "@tiptap/extension-bold": "^2.26.1",
+        "@tiptap/extension-bullet-list": "^2.26.1",
+        "@tiptap/extension-code": "^2.26.1",
+        "@tiptap/extension-code-block": "^2.26.1",
+        "@tiptap/extension-document": "^2.26.1",
+        "@tiptap/extension-dropcursor": "^2.26.1",
+        "@tiptap/extension-gapcursor": "^2.26.1",
+        "@tiptap/extension-hard-break": "^2.26.1",
+        "@tiptap/extension-heading": "^2.26.1",
+        "@tiptap/extension-history": "^2.26.1",
+        "@tiptap/extension-horizontal-rule": "^2.26.1",
+        "@tiptap/extension-italic": "^2.26.1",
+        "@tiptap/extension-list-item": "^2.26.1",
+        "@tiptap/extension-ordered-list": "^2.26.1",
+        "@tiptap/extension-paragraph": "^2.26.1",
+        "@tiptap/extension-strike": "^2.26.1",
+        "@tiptap/extension-text": "^2.26.1",
+        "@tiptap/extension-text-style": "^2.26.1",
+        "@tiptap/pm": "^2.26.1"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      }
+    },
+    "node_modules/@tldraw/editor": {
+      "version": "3.15.4",
+      "resolved": "https://registry.npmjs.org/@tldraw/editor/-/editor-3.15.4.tgz",
+      "integrity": "sha512-T0dF6OzDMLsYDceeEl1MBaLRnk7Wipdde6clCC/dsEsRFQQmJLVbTcApqCnOebWaTV2aw2Rpkz7X5J6ZmtjPpw==",
+      "license": "SEE LICENSE IN LICENSE.md",
+      "dependencies": {
+        "@tiptap/core": "^2.9.1",
+        "@tiptap/pm": "^2.9.1",
+        "@tiptap/react": "^2.9.1",
+        "@tldraw/state": "3.15.4",
+        "@tldraw/state-react": "3.15.4",
+        "@tldraw/store": "3.15.4",
+        "@tldraw/tlschema": "3.15.4",
+        "@tldraw/utils": "3.15.4",
+        "@tldraw/validate": "3.15.4",
+        "@types/core-js": "^2.5.8",
+        "@use-gesture/react": "^10.3.1",
+        "classnames": "^2.5.1",
+        "core-js": "^3.40.0",
+        "eventemitter3": "^4.0.7",
+        "idb": "^7.1.1",
+        "is-plain-object": "^5.0.0"
+      },
+      "peerDependencies": {
+        "react": "^18.2.0 || ^19.0.0",
+        "react-dom": "^18.2.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@tldraw/state": {
+      "version": "3.15.4",
+      "resolved": "https://registry.npmjs.org/@tldraw/state/-/state-3.15.4.tgz",
+      "integrity": "sha512-0TQwPIh5CSAlILf42bWioGESAIRFSWETL+0JzEagnGtegWOfiJdZKvFSRA9Eqj5hzbQ0SKlwmbT7lZVrrJfFug==",
+      "license": "MIT",
+      "dependencies": {
+        "@tldraw/utils": "3.15.4"
+      }
+    },
+    "node_modules/@tldraw/state-react": {
+      "version": "3.15.4",
+      "resolved": "https://registry.npmjs.org/@tldraw/state-react/-/state-react-3.15.4.tgz",
+      "integrity": "sha512-teqbNFTjJlTss2VxtY1OwGUSkrdUBifNy1+SVgj7OviZJgxDV2RIV8iQ1qIsXy0/4IHTRw5bshh4KObCZPAd0w==",
+      "license": "MIT",
+      "dependencies": {
+        "@tldraw/state": "3.15.4",
+        "@tldraw/utils": "3.15.4"
+      },
+      "peerDependencies": {
+        "react": "^18.2.0 || ^19.0.0",
+        "react-dom": "^18.2.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@tldraw/store": {
+      "version": "3.15.4",
+      "resolved": "https://registry.npmjs.org/@tldraw/store/-/store-3.15.4.tgz",
+      "integrity": "sha512-aHNBPMn0qKctBnY6EEI4nSy64G9yhKoTgSKoR6Jmv5QVA0uPgUj3yEm+kmivmQswfH3IXLj7UHDanqbuxcNctg==",
+      "license": "MIT",
+      "dependencies": {
+        "@tldraw/state": "3.15.4",
+        "@tldraw/utils": "3.15.4"
+      },
+      "peerDependencies": {
+        "react": "^18.2.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@tldraw/tldraw": {
+      "version": "3.15.4",
+      "resolved": "https://registry.npmjs.org/@tldraw/tldraw/-/tldraw-3.15.4.tgz",
+      "integrity": "sha512-N+OAVHleX5b9La1J86xUfAKtZmX5wEO42e6VE/49oJrhy5ayL5Y3vFzGjPkSdKoPxipzjl8P0ouG+WQPoaQKPQ==",
+      "license": "SEE LICENSE IN LICENSE.md",
+      "dependencies": {
+        "tldraw": "3.15.4"
+      },
+      "peerDependencies": {
+        "react": "^18.2.0 || ^19.0.0",
+        "react-dom": "^18.2.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@tldraw/tlschema": {
+      "version": "3.15.4",
+      "resolved": "https://registry.npmjs.org/@tldraw/tlschema/-/tlschema-3.15.4.tgz",
+      "integrity": "sha512-ZIm96L3A+KzbOYeCmV8ccsYTKxchKBMvM3AOFVbGD6pOcIXkkswOQfAzKPN8gPEn9eOss5SvXUfQeTrtwSDAKg==",
+      "license": "MIT",
+      "dependencies": {
+        "@tldraw/state": "3.15.4",
+        "@tldraw/store": "3.15.4",
+        "@tldraw/utils": "3.15.4",
+        "@tldraw/validate": "3.15.4"
+      },
+      "peerDependencies": {
+        "react": "^18.2.0 || ^19.0.0",
+        "react-dom": "^18.2.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@tldraw/utils": {
+      "version": "3.15.4",
+      "resolved": "https://registry.npmjs.org/@tldraw/utils/-/utils-3.15.4.tgz",
+      "integrity": "sha512-NY9wf4+nMQEBTNaGFDv4FI7PI3aNcYzpf0GUvWgs9kjZ1IeptcC+YqFyGwifa7MMjWVW3eYT+J/mP3GQKYRCkw==",
+      "license": "SEE LICENSE IN LICENSE.md",
+      "dependencies": {
+        "fractional-indexing-jittered": "^1.0.0",
+        "lodash.isequal": "^4.5.0",
+        "lodash.isequalwith": "^4.4.0",
+        "lodash.throttle": "^4.1.1",
+        "lodash.uniq": "^4.5.0"
+      }
+    },
+    "node_modules/@tldraw/validate": {
+      "version": "3.15.4",
+      "resolved": "https://registry.npmjs.org/@tldraw/validate/-/validate-3.15.4.tgz",
+      "integrity": "sha512-xX/C+UHulp3tcLZDAjqZ+Cke7C0W7FBIKvYkIvc7c6VrjO9y9tqqz9E3mOb6tduTa2laOxpo8e3Fr/azS3el5g==",
+      "license": "SEE LICENSE IN LICENSE.md",
+      "dependencies": {
+        "@tldraw/utils": "3.15.4"
+      }
+    },
     "node_modules/@tybys/wasm-util": {
       "version": "0.10.0",
       "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.0.tgz",
@@ -2263,6 +3398,12 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@types/core-js": {
+      "version": "2.5.8",
+      "resolved": "https://registry.npmjs.org/@types/core-js/-/core-js-2.5.8.tgz",
+      "integrity": "sha512-VgnAj6tIAhJhZdJ8/IpxdatM8G4OD3VWGlp6xIxUGENZlpbob9Ty4VVdC1FIEp0aK6DBscDDjyzy5FB60TuNqg==",
+      "license": "MIT"
+    },
     "node_modules/@types/estree": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
@@ -2284,6 +3425,28 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/linkify-it": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-5.0.0.tgz",
+      "integrity": "sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==",
+      "license": "MIT"
+    },
+    "node_modules/@types/markdown-it": {
+      "version": "14.1.2",
+      "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-14.1.2.tgz",
+      "integrity": "sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/linkify-it": "^5",
+        "@types/mdurl": "^2"
+      }
+    },
+    "node_modules/@types/mdurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-2.0.0.tgz",
+      "integrity": "sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==",
+      "license": "MIT"
+    },
     "node_modules/@types/node": {
       "version": "20.19.10",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.10.tgz",
@@ -2314,6 +3477,19 @@
         "@types/react": "^19.0.0"
       }
     },
+    "node_modules/@types/svg-path-parser": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/@types/svg-path-parser/-/svg-path-parser-1.1.6.tgz",
+      "integrity": "sha512-3sw6pk91pEtW6W7hRrJ9ZkAgPiJSaNdh7iY8rVOy7buajpQuy2J9A0ZUaiOVcbFvl0p7J+Ne4012muCE/MB+hQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
+      "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
+      "license": "MIT"
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.39.1",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.39.1.tgz",
@@ -2871,6 +4047,24 @@
         "win32"
       ]
     },
+    "node_modules/@use-gesture/core": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmjs.org/@use-gesture/core/-/core-10.3.1.tgz",
+      "integrity": "sha512-WcINiDt8WjqBdUXye25anHiNxPc0VOrlT8F6LLkU6cycrOGUDyY/yyFmsg3k8i5OLvv25llc0QC45GhR/C8llw==",
+      "license": "MIT"
+    },
+    "node_modules/@use-gesture/react": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmjs.org/@use-gesture/react/-/react-10.3.1.tgz",
+      "integrity": "sha512-Yy19y6O2GJq8f7CHf7L0nxL8bf4PZCPaVOCgJrusOeFHY1LvHgYXnmnXg6N5iwAnbgbZCDjo60SiM6IPJi9C5g==",
+      "license": "MIT",
+      "dependencies": {
+        "@use-gesture/core": "10.3.1"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0"
+      }
+    },
     "node_modules/acorn": {
       "version": "8.15.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
@@ -2931,7 +4125,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-      "dev": true,
       "license": "Python-2.0"
     },
     "node_modules/aria-hidden": {
@@ -3335,6 +4528,12 @@
         "url": "https://polar.sh/cva"
       }
     },
+    "node_modules/classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==",
+      "license": "MIT"
+    },
     "node_modules/client-only": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
@@ -3414,6 +4613,23 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/core-js": {
+      "version": "3.45.1",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.45.1.tgz",
+      "integrity": "sha512-L4NPsJlCfZsPeXukyzHFlg/i7IIVwHSItR0wg0FLNqYClJ4MQYTYLbC7EkjKYRLZF2iof2MUgN0EGy7MdQFChg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
+    "node_modules/crelt": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/crelt/-/crelt-1.0.6.tgz",
+      "integrity": "sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==",
+      "license": "MIT"
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -3631,6 +4847,18 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/es-abstract": {
       "version": "1.24.0",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.24.0.tgz",
@@ -3808,7 +5036,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
       "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=10"
@@ -4243,11 +5470,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/eventemitter3": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
+      "license": "MIT"
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/fast-glob": {
@@ -4420,6 +5652,12 @@
         "node": ">= 6"
       }
     },
+    "node_modules/fractional-indexing-jittered": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fractional-indexing-jittered/-/fractional-indexing-jittered-1.0.0.tgz",
+      "integrity": "sha512-0tLU0FOedVY7lrvN4LK0DVj6FTuYM0pWDpN97/8UTZE2lx1+OwX8+2uL7IOWc2PmktYTHQjMT6FvZZ3SGCdZdg==",
+      "license": "CC0-1.0"
+    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -4697,6 +5935,21 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hotkeys-js": {
+      "version": "3.13.15",
+      "resolved": "https://registry.npmjs.org/hotkeys-js/-/hotkeys-js-3.13.15.tgz",
+      "integrity": "sha512-gHh8a/cPTCpanraePpjRxyIlxDFrIhYqjuh01UHWEwDpglJKCnvLW8kqSx5gQtOuSsJogNZXLhOdbSExpgUiqg==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://jaywcjlove.github.io/#/sponsor"
+      }
+    },
+    "node_modules/idb": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/idb/-/idb-7.1.1.tgz",
+      "integrity": "sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ==",
+      "license": "ISC"
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -5012,6 +6265,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-plain-object": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
+      "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/is-regex": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
@@ -5552,6 +6814,21 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/linkify-it": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz",
+      "integrity": "sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==",
+      "license": "MIT",
+      "dependencies": {
+        "uc.micro": "^2.0.0"
+      }
+    },
+    "node_modules/linkifyjs": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/linkifyjs/-/linkifyjs-4.3.2.tgz",
+      "integrity": "sha512-NT1CJtq3hHIreOianA8aSXn6Cw0JzYOuDQbOrSPe7gqFnCpKP++MQe3ODgO3oh2GJFORkAAdqredOa60z63GbA==",
+      "license": "MIT"
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -5568,6 +6845,19 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash.isequal": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+      "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==",
+      "deprecated": "This package is deprecated. Use require('node:util').isDeepStrictEqual instead.",
+      "license": "MIT"
+    },
+    "node_modules/lodash.isequalwith": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.isequalwith/-/lodash.isequalwith-4.4.0.tgz",
+      "integrity": "sha512-dcZON0IalGBpRmJBmMkaoV7d3I80R2O+FrzsZyHdNSFrANq/cgDqKQNmAHE8UEj4+QYWwwhkQOVdLHiAopzlsQ==",
+      "license": "MIT"
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -5575,6 +6865,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.uniq": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
+      "integrity": "sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==",
+      "license": "MIT"
+    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -5597,6 +6899,15 @@
         "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/lz-string": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
+      "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
+      "license": "MIT",
+      "bin": {
+        "lz-string": "bin/bin.js"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.17",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
@@ -5607,6 +6918,23 @@
         "@jridgewell/sourcemap-codec": "^1.5.0"
       }
     },
+    "node_modules/markdown-it": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.0.tgz",
+      "integrity": "sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==",
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1",
+        "entities": "^4.4.0",
+        "linkify-it": "^5.0.0",
+        "mdurl": "^2.0.0",
+        "punycode.js": "^2.3.1",
+        "uc.micro": "^2.1.0"
+      },
+      "bin": {
+        "markdown-it": "bin/markdown-it.mjs"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -5616,6 +6944,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/mdurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz",
+      "integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==",
+      "license": "MIT"
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -5992,6 +7326,12 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/orderedmap": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/orderedmap/-/orderedmap-2.1.1.tgz",
+      "integrity": "sha512-TvAWxi0nDe1j/rtMcWcIj94+Ffe6n7zhow33h40SKxmsmozs6dz/e+EajymfoFcHd7sxNn8yHM8839uixMOV6g==",
+      "license": "MIT"
+    },
     "node_modules/own-keys": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/own-keys/-/own-keys-1.0.1.tgz",
@@ -6162,6 +7502,201 @@
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/prosemirror-changeset": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-changeset/-/prosemirror-changeset-2.3.1.tgz",
+      "integrity": "sha512-j0kORIBm8ayJNl3zQvD1TTPHJX3g042et6y/KQhZhnPrruO8exkTgG8X+NRpj7kIyMMEx74Xb3DyMIBtO0IKkQ==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-transform": "^1.0.0"
+      }
+    },
+    "node_modules/prosemirror-collab": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-collab/-/prosemirror-collab-1.3.1.tgz",
+      "integrity": "sha512-4SnynYR9TTYaQVXd/ieUvsVV4PDMBzrq2xPUWutHivDuOshZXqQ5rGbZM84HEaXKbLdItse7weMGOUdDVcLKEQ==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-state": "^1.0.0"
+      }
+    },
+    "node_modules/prosemirror-commands": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-commands/-/prosemirror-commands-1.7.1.tgz",
+      "integrity": "sha512-rT7qZnQtx5c0/y/KlYaGvtG411S97UaL6gdp6RIZ23DLHanMYLyfGBV5DtSnZdthQql7W+lEVbpSfwtO8T+L2w==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.10.2"
+      }
+    },
+    "node_modules/prosemirror-dropcursor": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/prosemirror-dropcursor/-/prosemirror-dropcursor-1.8.2.tgz",
+      "integrity": "sha512-CCk6Gyx9+Tt2sbYk5NK0nB1ukHi2ryaRgadV/LvyNuO3ena1payM2z6Cg0vO1ebK8cxbzo41ku2DE5Axj1Zuiw==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.1.0",
+        "prosemirror-view": "^1.1.0"
+      }
+    },
+    "node_modules/prosemirror-gapcursor": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/prosemirror-gapcursor/-/prosemirror-gapcursor-1.3.2.tgz",
+      "integrity": "sha512-wtjswVBd2vaQRrnYZaBCbyDqr232Ed4p2QPtRIUK5FuqHYKGWkEwl08oQM4Tw7DOR0FsasARV5uJFvMZWxdNxQ==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-keymap": "^1.0.0",
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-view": "^1.0.0"
+      }
+    },
+    "node_modules/prosemirror-history": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-history/-/prosemirror-history-1.4.1.tgz",
+      "integrity": "sha512-2JZD8z2JviJrboD9cPuX/Sv/1ChFng+xh2tChQ2X4bB2HeK+rra/bmJ3xGntCcjhOqIzSDG6Id7e8RJ9QPXLEQ==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-state": "^1.2.2",
+        "prosemirror-transform": "^1.0.0",
+        "prosemirror-view": "^1.31.0",
+        "rope-sequence": "^1.3.0"
+      }
+    },
+    "node_modules/prosemirror-inputrules": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/prosemirror-inputrules/-/prosemirror-inputrules-1.5.0.tgz",
+      "integrity": "sha512-K0xJRCmt+uSw7xesnHmcn72yBGTbY45vm8gXI4LZXbx2Z0jwh5aF9xrGQgrVPu0WbyFVFF3E/o9VhJYz6SQWnA==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.0.0"
+      }
+    },
+    "node_modules/prosemirror-keymap": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/prosemirror-keymap/-/prosemirror-keymap-1.2.3.tgz",
+      "integrity": "sha512-4HucRlpiLd1IPQQXNqeo81BGtkY8Ai5smHhKW9jjPKRc2wQIxksg7Hl1tTI2IfT2B/LgX6bfYvXxEpJl7aKYKw==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-state": "^1.0.0",
+        "w3c-keyname": "^2.2.0"
+      }
+    },
+    "node_modules/prosemirror-markdown": {
+      "version": "1.13.2",
+      "resolved": "https://registry.npmjs.org/prosemirror-markdown/-/prosemirror-markdown-1.13.2.tgz",
+      "integrity": "sha512-FPD9rHPdA9fqzNmIIDhhnYQ6WgNoSWX9StUZ8LEKapaXU9i6XgykaHKhp6XMyXlOWetmaFgGDS/nu/w9/vUc5g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/markdown-it": "^14.0.0",
+        "markdown-it": "^14.0.0",
+        "prosemirror-model": "^1.25.0"
+      }
+    },
+    "node_modules/prosemirror-menu": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/prosemirror-menu/-/prosemirror-menu-1.2.5.tgz",
+      "integrity": "sha512-qwXzynnpBIeg1D7BAtjOusR+81xCp53j7iWu/IargiRZqRjGIlQuu1f3jFi+ehrHhWMLoyOQTSRx/IWZJqOYtQ==",
+      "license": "MIT",
+      "dependencies": {
+        "crelt": "^1.0.0",
+        "prosemirror-commands": "^1.0.0",
+        "prosemirror-history": "^1.0.0",
+        "prosemirror-state": "^1.0.0"
+      }
+    },
+    "node_modules/prosemirror-model": {
+      "version": "1.25.3",
+      "resolved": "https://registry.npmjs.org/prosemirror-model/-/prosemirror-model-1.25.3.tgz",
+      "integrity": "sha512-dY2HdaNXlARknJbrManZ1WyUtos+AP97AmvqdOQtWtrrC5g4mohVX5DTi9rXNFSk09eczLq9GuNTtq3EfMeMGA==",
+      "license": "MIT",
+      "dependencies": {
+        "orderedmap": "^2.0.0"
+      }
+    },
+    "node_modules/prosemirror-schema-basic": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/prosemirror-schema-basic/-/prosemirror-schema-basic-1.2.4.tgz",
+      "integrity": "sha512-ELxP4TlX3yr2v5rM7Sb70SqStq5NvI15c0j9j/gjsrO5vaw+fnnpovCLEGIcpeGfifkuqJwl4fon6b+KdrODYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-model": "^1.25.0"
+      }
+    },
+    "node_modules/prosemirror-schema-list": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-schema-list/-/prosemirror-schema-list-1.5.1.tgz",
+      "integrity": "sha512-927lFx/uwyQaGwJxLWCZRkjXG0p48KpMj6ueoYiu4JX05GGuGcgzAy62dfiV8eFZftgyBUvLx76RsMe20fJl+Q==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.7.3"
+      }
+    },
+    "node_modules/prosemirror-state": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/prosemirror-state/-/prosemirror-state-1.4.3.tgz",
+      "integrity": "sha512-goFKORVbvPuAQaXhpbemJFRKJ2aixr+AZMGiquiqKxaucC6hlpHNZHWgz5R7dS4roHiwq9vDctE//CZ++o0W1Q==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-transform": "^1.0.0",
+        "prosemirror-view": "^1.27.0"
+      }
+    },
+    "node_modules/prosemirror-tables": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-tables/-/prosemirror-tables-1.8.1.tgz",
+      "integrity": "sha512-DAgDoUYHCcc6tOGpLVPSU1k84kCUWTWnfWX3UDy2Delv4ryH0KqTD6RBI6k4yi9j9I8gl3j8MkPpRD/vWPZbug==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-keymap": "^1.2.2",
+        "prosemirror-model": "^1.25.0",
+        "prosemirror-state": "^1.4.3",
+        "prosemirror-transform": "^1.10.3",
+        "prosemirror-view": "^1.39.1"
+      }
+    },
+    "node_modules/prosemirror-trailing-node": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/prosemirror-trailing-node/-/prosemirror-trailing-node-3.0.0.tgz",
+      "integrity": "sha512-xiun5/3q0w5eRnGYfNlW1uU9W6x5MoFKWwq/0TIRgt09lv7Hcser2QYV8t4muXbEr+Fwo0geYn79Xs4GKywrRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@remirror/core-constants": "3.0.0",
+        "escape-string-regexp": "^4.0.0"
+      },
+      "peerDependencies": {
+        "prosemirror-model": "^1.22.1",
+        "prosemirror-state": "^1.4.2",
+        "prosemirror-view": "^1.33.8"
+      }
+    },
+    "node_modules/prosemirror-transform": {
+      "version": "1.10.4",
+      "resolved": "https://registry.npmjs.org/prosemirror-transform/-/prosemirror-transform-1.10.4.tgz",
+      "integrity": "sha512-pwDy22nAnGqNR1feOQKHxoFkkUtepoFAd3r2hbEDsnf4wp57kKA36hXsB3njA9FtONBEwSDnDeCiJe+ItD+ykw==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-model": "^1.21.0"
+      }
+    },
+    "node_modules/prosemirror-view": {
+      "version": "1.40.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-view/-/prosemirror-view-1.40.1.tgz",
+      "integrity": "sha512-pbwUjt3G7TlsQQHDiYSupWBhJswpLVB09xXm1YiJPdkjkh9Pe7Y51XdLh5VWIZmROLY8UpUpG03lkdhm9lzIBA==",
+      "license": "MIT",
+      "dependencies": {
+        "prosemirror-model": "^1.20.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.1.0"
+      }
+    },
     "node_modules/proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
@@ -6178,6 +7713,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/punycode.js": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz",
+      "integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -6199,6 +7743,83 @@
       ],
       "license": "MIT"
     },
+    "node_modules/radix-ui": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/radix-ui/-/radix-ui-1.4.3.tgz",
+      "integrity": "sha512-aWizCQiyeAenIdUbqEpXgRA1ya65P13NKn/W8rWkcN0OPkRDxdBVLWnIEDsS2RpwCK2nobI7oMUSmexzTDyAmA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-accessible-icon": "1.1.7",
+        "@radix-ui/react-accordion": "1.2.12",
+        "@radix-ui/react-alert-dialog": "1.1.15",
+        "@radix-ui/react-arrow": "1.1.7",
+        "@radix-ui/react-aspect-ratio": "1.1.7",
+        "@radix-ui/react-avatar": "1.1.10",
+        "@radix-ui/react-checkbox": "1.3.3",
+        "@radix-ui/react-collapsible": "1.1.12",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-context-menu": "2.2.16",
+        "@radix-ui/react-dialog": "1.1.15",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-dropdown-menu": "2.1.16",
+        "@radix-ui/react-focus-guards": "1.1.3",
+        "@radix-ui/react-focus-scope": "1.1.7",
+        "@radix-ui/react-form": "0.1.8",
+        "@radix-ui/react-hover-card": "1.1.15",
+        "@radix-ui/react-label": "2.1.7",
+        "@radix-ui/react-menu": "2.1.16",
+        "@radix-ui/react-menubar": "1.1.16",
+        "@radix-ui/react-navigation-menu": "1.2.14",
+        "@radix-ui/react-one-time-password-field": "0.1.8",
+        "@radix-ui/react-password-toggle-field": "0.1.3",
+        "@radix-ui/react-popover": "1.1.15",
+        "@radix-ui/react-popper": "1.2.8",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-progress": "1.1.7",
+        "@radix-ui/react-radio-group": "1.3.8",
+        "@radix-ui/react-roving-focus": "1.1.11",
+        "@radix-ui/react-scroll-area": "1.2.10",
+        "@radix-ui/react-select": "2.2.6",
+        "@radix-ui/react-separator": "1.1.7",
+        "@radix-ui/react-slider": "1.3.6",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-switch": "1.2.6",
+        "@radix-ui/react-tabs": "1.1.13",
+        "@radix-ui/react-toast": "1.2.15",
+        "@radix-ui/react-toggle": "1.1.10",
+        "@radix-ui/react-toggle-group": "1.1.11",
+        "@radix-ui/react-toolbar": "1.1.11",
+        "@radix-ui/react-tooltip": "1.2.8",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-effect-event": "0.0.2",
+        "@radix-ui/react-use-escape-keydown": "1.1.1",
+        "@radix-ui/react-use-is-hydrated": "0.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1",
+        "@radix-ui/react-visually-hidden": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react": {
       "version": "19.1.0",
       "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
@@ -6392,6 +8013,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/rope-sequence": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/rope-sequence/-/rope-sequence-1.3.4.tgz",
+      "integrity": "sha512-UT5EDe2cu2E/6O4igUr5PSFs23nvvukicWHx6GnOPlHAiiYbzNuCRQCuiUdHJQcqKalLKlrYJnjY0ySGsXNQXQ==",
+      "license": "MIT"
+    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -6906,6 +8533,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/svg-path-parser": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/svg-path-parser/-/svg-path-parser-1.1.0.tgz",
+      "integrity": "sha512-jGCUqcQyXpfe38R7RFfhrMyfXcBmpMNJI/B+4CE9/Unkh98UporAc461GTthv+TVDuZXsBx7/WiwJb1Oh4tt4A==",
+      "license": "MIT"
+    },
     "node_modules/tailwind-merge": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.3.1.tgz",
@@ -6996,6 +8629,41 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/tippy.js": {
+      "version": "6.3.7",
+      "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz",
+      "integrity": "sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@popperjs/core": "^2.9.0"
+      }
+    },
+    "node_modules/tldraw": {
+      "version": "3.15.4",
+      "resolved": "https://registry.npmjs.org/tldraw/-/tldraw-3.15.4.tgz",
+      "integrity": "sha512-HO8gVxZYAKs9D11bFjCc5H++jzYLd9tl+isTB9GPvRvyVwVPr1SNjZDpAXmkSQanKpC/nLcpTxFFR79TDDTYiQ==",
+      "license": "SEE LICENSE IN LICENSE.md",
+      "dependencies": {
+        "@tiptap/core": "^2.9.1",
+        "@tiptap/extension-code": "^2.9.1",
+        "@tiptap/extension-highlight": "^2.9.1",
+        "@tiptap/extension-link": "^2.9.1",
+        "@tiptap/pm": "^2.9.1",
+        "@tiptap/react": "^2.9.1",
+        "@tiptap/starter-kit": "^2.9.1",
+        "@tldraw/editor": "3.15.4",
+        "@tldraw/store": "3.15.4",
+        "classnames": "^2.5.1",
+        "hotkeys-js": "^3.13.9",
+        "idb": "^7.1.1",
+        "lz-string": "^1.5.0",
+        "radix-ui": "^1.3.4"
+      },
+      "peerDependencies": {
+        "react": "^18.2.0 || ^19.0.0",
+        "react-dom": "^18.2.0 || ^19.0.0"
+      }
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -7156,6 +8824,12 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/uc.micro": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz",
+      "integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==",
+      "license": "MIT"
+    },
     "node_modules/unbox-primitive": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.1.0.tgz",
@@ -7279,6 +8953,12 @@
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/w3c-keyname": {
+      "version": "2.2.8",
+      "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
+      "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==",
+      "license": "MIT"
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/package.json b/package.json
index 46f8975..7f8877f 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "@radix-ui/react-select": "^2.2.5",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-tabs": "^1.1.12",
+    "@tldraw/tldraw": "^3.15.4",
     "axios": "^1.11.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -28,6 +29,7 @@
     "next": "15.4.6",
     "react": "19.1.0",
     "react-dom": "19.1.0",
+    "svg-path-parser": "^1.1.0",
     "tailwind-merge": "^3.3.1",
     "zustand": "^5.0.8"
   },
@@ -37,6 +39,7 @@
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "@types/svg-path-parser": "^1.1.6",
     "eslint": "^9",
     "eslint-config-next": "15.4.6",
     "tailwindcss": "^4",
diff --git a/src/components/ai-side-panel.tsx b/src/components/ai-side-panel.tsx
new file mode 100644
index 0000000..0ea3a73
--- /dev/null
+++ b/src/components/ai-side-panel.tsx
@@ -0,0 +1,215 @@
+"use client"
+
+import { useMemo, useState } from "react"
+import { Button } from "@/components/ui/button"
+import { Textarea } from "@/components/ui/textarea"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { cn } from "@/lib/utils"
+
+type Block = {
+  id: string
+  label: string
+  x: number
+  y: number
+  w: number
+  h: number
+}
+
+export type WireframePlan = {
+  version: number
+  blocks: Block[]
+}
+
+export function AISidePanel({
+  onGenerate,
+  onClear,
+  className,
+}: {
+  onGenerate: (plan: WireframePlan) => void
+  onClear: () => void
+  className?: string
+}) {
+  const [collapsed, setCollapsed] = useState(false)
+  const [prompt, setPrompt] = useState(
+    "Dashboard with header, left sidebar, 3 stats cards, a line chart and a data table, plus footer.",
+  )
+  const [version, setVersion] = useState(1)
+
+  const examples = useMemo(
+    () => [
+      "Landing page with header, hero, 3x2 feature grid, and footer.",
+      "Settings screen: header, list of toggles, and save button.",
+      "E‑commerce product page: header, 2-column gallery/details, reviews, sticky add-to-cart.",
+      "Dashboard: header, left sidebar, 3 stats cards, line chart, data table, footer.",
+      "Signup page: header, 2-column form, callout, submit button.",
+    ],
+    [],
+  )
+
+  function parsePromptToPlan(input: string): WireframePlan {
+    const W = 1200
+    const H = 800
+    const P = 24
+    const blocks: Block[] = []
+    let y = P
+    let x = P
+    let width = W - 2 * P
+
+    const lower = input.toLowerCase()
+    const addBlock = (label: string, bx: number, by: number, bw: number, bh: number) => {
+      blocks.push({
+        id: `${label}-${Math.random().toString(36).slice(2, 8)}`,
+        label,
+        x: Math.round(bx),
+        y: Math.round(by),
+        w: Math.round(bw),
+        h: Math.round(bh),
+      })
+    }
+
+    if (/\bheader\b/.test(lower) || /\bnavbar\b/.test(lower)) {
+      addBlock("Header", x, y, width, 72)
+      y += 72 + P
+    }
+
+    let hasSidebar = false
+    if (/\bsidebar\b/.test(lower) || /\bleft sidebar\b/.test(lower)) {
+      hasSidebar = true
+      addBlock("Sidebar", x, y, 260, H - y - P)
+      x += 260 + P
+      width = W - x - P
+    }
+
+    if (/\bhero\b/.test(lower)) {
+      addBlock("Hero", x, y, width, 200)
+      y += 200 + P
+    }
+
+    if (/stats?\b/.test(lower) || /\bcards?\b/.test(lower)) {
+      const cols = /4/.test(lower) ? 4 : 3
+      const gap = P
+      const cardW = (width - gap * (cols - 1)) / cols
+      const cardH = 100
+      for (let i = 0; i < cols; i++) {
+        addBlock(`Card ${i + 1}`, x + i * (cardW + gap), y, cardW, cardH)
+      }
+      y += cardH + P
+    }
+
+    const gridMatch = lower.match(/(\d)\s*x\s*(\d)/)
+    if (gridMatch) {
+      const cols = Number.parseInt(gridMatch[1], 10)
+      const rows = Number.parseInt(gridMatch[2], 10)
+      const gap = P
+      const cellW = (width - gap * (cols - 1)) / cols
+      const cellH = 120
+      for (let r = 0; r < rows; r++) {
+        for (let c = 0; c < cols; c++) {
+          addBlock(`Feature ${r * cols + c + 1}`, x + c * (cellW + gap), y + r * (cellH + gap), cellW, cellH)
+        }
+      }
+      y += rows * cellH + (rows - 1) * gap + P
+    }
+
+    if (/\b2[-\s]?column\b/.test(lower) || /gallery\/details/.test(lower) || /gallery/.test(lower)) {
+      const gap = P
+      const colW = (width - gap) / 2
+      const colH = 260
+      addBlock("Left Column", x, y, colW, colH)
+      addBlock("Right Column", x + colW + gap, y, colW, colH)
+      y += colH + P
+    }
+
+    if (/\bchart\b/.test(lower) || /\bline chart\b/.test(lower)) {
+      addBlock("Chart", x, y, width, 220)
+      y += 220 + P
+    }
+    if (/\btable\b/.test(lower)) {
+      addBlock("Data Table", x, y, width, 260)
+      y += 260 + P
+    }
+
+    if (/\bform\b/.test(lower) || /\bsignup\b/.test(lower) || /\blogin\b/.test(lower)) {
+      const gap = P
+      const twoCol = /\b2[-\s]?column\b/.test(lower)
+      if (twoCol) {
+        const colW = (width - gap) / 2
+        addBlock("Form Left", x, y, colW, 260)
+        addBlock("Form Right", x + colW + gap, y, colW, 260)
+        y += 260 + P
+      } else {
+        addBlock("Form", x, y, width, 220)
+        y += 220 + P
+      }
+    }
+
+    if (/\bfooter\b/.test(lower)) {
+      addBlock("Footer", P, H - 80 - P, W - 2 * P, 80)
+    }
+
+    return { version: Date.now() + version, blocks }
+  }
+
+  const handleGenerate = () => {
+    const plan = parsePromptToPlan(prompt)
+    setVersion((v) => v + 1)
+    onGenerate(plan)
+  }
+
+  return (
+    <aside
+      className={cn(
+        "h-full border-l bg-white dark:bg-neutral-900 flex flex-col",
+        collapsed ? "w-12" : "w-96",
+        className,
+      )}
+      aria-label="AI prompt side panel"
+    >
+      <div className="flex items-center justify-between px-3 py-2 border-b">
+        <h2 className={cn("text-sm font-medium text-balance", collapsed && "sr-only")}>AI Wireframe</h2>
+        <Button variant="ghost" size="icon" onClick={() => setCollapsed((c) => !c)} aria-label="Toggle panel">
+          {collapsed ? <span aria-hidden>›</span> : <span aria-hidden>‹</span>}
+        </Button>
+      </div>
+
+      {!collapsed && (
+        <div className="flex flex-col gap-3 p-3">
+          <label className="text-xs font-medium">Prompt</label>
+          <Textarea
+            value={prompt}
+            onChange={(e) => setPrompt(e.target.value)}
+            placeholder="Describe your screen: Landing with header, hero, 3x2 features, footer"
+            className="min-h-28"
+          />
+          <div className="flex gap-2">
+            <Button onClick={handleGenerate} className="flex-1">
+              Generate
+            </Button>
+            <Button variant="secondary" onClick={onClear}>
+              Clear
+            </Button>
+          </div>
+
+          <div className="pt-1">
+            <p className="text-xs font-medium mb-2">Examples</p>
+            <ScrollArea className="h-40 border rounded">
+              <ul className="p-2 space-y-2">
+                {examples.map((ex) => (
+                  <li key={ex}>
+                    <button
+                      type="button"
+                      onClick={() => setPrompt(ex)}
+                      className="text-left text-xs w-full hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded px-2 py-1"
+                    >
+                      {ex}
+                    </button>
+                  </li>
+                ))}
+              </ul>
+            </ScrollArea>
+          </div>
+        </div>
+      )}
+    </aside>
+  )
+}
diff --git a/src/components/auth/signup-form.tsx b/src/components/auth/signup-form.tsx
index 8ef6d11..9e8adac 100644
--- a/src/components/auth/signup-form.tsx
+++ b/src/components/auth/signup-form.tsx
@@ -31,7 +31,6 @@ export function SignUpForm({ onSignUpSuccess }: SignUpFormProps) {
     role: "user" // default role, adjust as needed
   })
   
-  const { signup } = useAuth()
   const router = useRouter()
 
   const handleSubmit = async (e: React.FormEvent) => {
diff --git a/src/components/main-dashboard.tsx b/src/components/main-dashboard.tsx
index b2a65c2..2d37553 100644
--- a/src/components/main-dashboard.tsx
+++ b/src/components/main-dashboard.tsx
@@ -7,13 +7,15 @@ import { Input } from "@/components/ui/input"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { Badge } from "@/components/ui/badge"
 import { Checkbox } from "@/components/ui/checkbox"
-import { ArrowRight, Plus, Globe, BarChart3, Zap, Code, Search, Star, Clock, Users, Layers, AlertCircle, Edit, Trash2 } from "lucide-react"
+import { ArrowRight, Plus, Globe, BarChart3, Zap, Code, Search, Star, Clock, Users, Layers, AlertCircle, Edit, Trash2, Palette } from "lucide-react"
 import { useTemplates } from "@/hooks/useTemplates"
 import { CustomTemplateForm } from "@/components/custom-template-form"
 import { EditTemplateForm } from "@/components/edit-template-form"
 import { DeleteConfirmationDialog } from "@/components/delete-confirmation-dialog"
 import { DatabaseTemplate, TemplateFeature } from "@/lib/template-service"
 import AICustomFeatureCreator from "@/components/ai/AICustomFeatureCreator"
+import WireframeCanvas from "@/components/wireframe-canvas"
+import PromptSidePanel from "@/components/prompt-side-panel"
 
 interface Template {
   id: string
@@ -934,22 +936,315 @@ function TechStackSummaryStep({
   )
 }
 
+// AI Mockup Step Component
+function AIMockupStep({
+  template,
+  selectedFeatures,
+  onNext,
+  onBack,
+}: { 
+  template: Template; 
+  selectedFeatures: TemplateFeature[]; 
+  onNext: () => void; 
+  onBack: () => void 
+}) {
+  const [mounted, setMounted] = useState(false)
+  const [wireframeData, setWireframeData] = useState<any>(null)
+  const [isGenerating, setIsGenerating] = useState(false)
+  const [selectedDevice, setSelectedDevice] = useState<'desktop' | 'tablet' | 'mobile'>('desktop')
+
+  // Load state from localStorage after component mounts
+  useEffect(() => {
+    setMounted(true)
+    
+    // Load device type
+    const savedDevice = localStorage.getItem('wireframe_device_type')
+    if (savedDevice && ['desktop', 'tablet', 'mobile'].includes(savedDevice)) {
+      setSelectedDevice(savedDevice as 'desktop' | 'tablet' | 'mobile')
+    }
+    
+    // Load wireframe data
+    const savedWireframeData = localStorage.getItem('wireframe_data')
+    if (savedWireframeData) {
+      try {
+        const parsed = JSON.parse(savedWireframeData)
+        setWireframeData(parsed)
+      } catch (error) {
+        console.error('Failed to parse saved wireframe data:', error)
+      }
+    }
+  }, [])
+
+  const handleWireframeGenerated = (data: any) => {
+    setWireframeData(data)
+    setIsGenerating(false)
+  }
+
+  const handleWireframeGenerationStart = () => {
+    setIsGenerating(true)
+  }
+
+  const handleDeviceChange = (device: 'desktop' | 'tablet' | 'mobile') => {
+    console.log('DEBUG: AIMockupStep handleDeviceChange called with:', device)
+    console.log('DEBUG: Previous selectedDevice state:', selectedDevice)
+    
+    setSelectedDevice(device)
+    
+    // Save to localStorage (only after mounting)
+    if (mounted) {
+      localStorage.setItem('wireframe_device_type', device)
+      console.log('DEBUG: Saved device type to localStorage:', device)
+    }
+    
+    console.log('DEBUG: New selectedDevice state:', device)
+  }
+
+  // Save wireframe data to localStorage when it changes (only after mounting)
+  useEffect(() => {
+    if (wireframeData && mounted) {
+      localStorage.setItem('wireframe_data', JSON.stringify(wireframeData))
+    }
+  }, [wireframeData, mounted])
+
+  // Debug: Log when selectedDevice prop changes
+  useEffect(() => {
+    console.log('DEBUG: AIMockupStep selectedDevice state changed to:', selectedDevice)
+  }, [selectedDevice])
+
+  // Debug: Log when selectedDevice prop changes
+  useEffect(() => {
+    console.log('DEBUG: WireframeCanvas selectedDevice prop changed to:', selectedDevice)
+  }, [selectedDevice])
+
+  return (
+    <div className="max-w-7xl mx-auto space-y-6">
+      <div className="text-center space-y-4">
+        <h1 className="text-4xl font-bold text-white">AI Wireframe Mockup</h1>
+        <p className="text-xl text-white/60 max-w-3xl mx-auto">
+          Generate and customize wireframes for {template.title} using AI-powered design tools
+        </p>
+        <div className="flex items-center justify-center gap-2 text-orange-400">
+          <Palette className="h-5 w-5" />
+          <span className="text-sm font-medium">AI-Powered Wireframe Generation</span>
+        </div>
+      </div>
+
+      {/* Wireframe Canvas and Panel */}
+      <div className="bg-white/5 border border-white/10 rounded-xl overflow-hidden" style={{ height: '600px' }}>
+        <div className="flex h-full">
+          {/* Main Canvas Area */}
+          <div className="flex-1 relative">
+            <WireframeCanvas 
+              className="h-full w-full"
+              onWireframeGenerated={handleWireframeGenerated}
+              onGenerationStart={handleWireframeGenerationStart}
+              selectedDevice={selectedDevice}
+            />
+          </div>
+          
+          {/* AI Prompt Panel */}
+          <PromptSidePanel 
+            className="border-l border-white/10" 
+            selectedDevice={selectedDevice}
+            onDeviceChange={handleDeviceChange}
+          />
+        </div>
+      </div>
+
+      {/* Wireframe Status and Controls */}
+      <div className="bg-white/5 border border-white/10 rounded-xl p-6">
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          <div className="text-center">
+            <div className="text-2xl font-bold text-white mb-2">
+              {wireframeData ? '✅' : '⏳'}
+            </div>
+            <div className="text-white/80 font-medium">
+              {wireframeData ? 'Wireframe Generated' : 'Ready to Generate'}
+            </div>
+            <div className="text-white/60 text-sm">
+              {wireframeData ? 'Click Continue to proceed' : 'Use the AI panel to create wireframes'}
+            </div>
+          </div>
+          
+          <div className="text-center">
+            <div className="text-2xl font-bold text-white mb-2">
+              {selectedFeatures.length}
+            </div>
+            <div className="text-white/80 font-medium">Features Selected</div>
+            <div className="text-white/60 text-sm">
+              {template.title} template
+            </div>
+          </div>
+          
+          <div className="text-center">
+            <div className="text-2xl font-bold text-white mb-2">
+              {isGenerating ? '🔄' : '🎨'}
+            </div>
+            <div className="text-white/80 font-medium">
+              {isGenerating ? 'Generating...' : 'AI Ready'}
+            </div>
+            <div className="text-white/60 text-sm">
+              {isGenerating ? 'Creating wireframe layout' : 'Claude AI powered'}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Navigation */}
+      <div className="text-center py-6">
+        <div className="space-x-4">
+          <Button variant="outline" onClick={onBack} className="border-white/20 text-white hover:bg-white/10">
+            ← Back to Features
+          </Button>
+          <Button 
+            onClick={onNext} 
+            disabled={!wireframeData}
+            className={`bg-orange-500 hover:bg-orange-400 text-black font-semibold py-2 rounded-lg shadow ${
+              !wireframeData ? 'opacity-50 cursor-not-allowed' : ''
+            }`}
+          >
+            Continue to Business Context →
+          </Button>
+        </div>
+        <div className="text-white/60 text-sm mt-2">
+          {wireframeData 
+            ? 'Wireframe generated successfully! Continue to define business requirements.' 
+            : 'Generate a wireframe first to continue to the next step.'
+          }
+        </div>
+      </div>
+    </div>
+  )
+}
+
 // Main Dashboard Component
 export function MainDashboard() {
+  const [mounted, setMounted] = useState(false)
   const [currentStep, setCurrentStep] = useState(1)
-  const [selectedTemplate, setSelectedTemplate] = useState<Template | null>(null)
-  const [selectedFeatures, setSelectedFeatures] = useState<TemplateFeature[]>([])
-  const [finalProjectData, setFinalProjectData] = useState<any>(null)
-  const [techStackRecommendations, setTechStackRecommendations] = useState<any>(null)
+  const [selectedTemplate, setSelectedTemplate] = useState<Template | null>(() => {
+    // Only access localStorage after component mounts to prevent hydration mismatch
+    return null
+  })
+  const [selectedFeatures, setSelectedFeatures] = useState<TemplateFeature[]>(() => {
+    // Only access localStorage after component mounts to prevent hydration mismatch
+    return []
+  })
+  const [finalProjectData, setFinalProjectData] = useState<any>(() => {
+    // Only access localStorage after component mounts to prevent hydration mismatch
+    return null
+  })
+  const [techStackRecommendations, setTechStackRecommendations] = useState<any>(() => {
+    // Only access localStorage after component mounts to prevent hydration mismatch
+    return null
+  })
+
+  // Load state from localStorage after component mounts
+  useEffect(() => {
+    setMounted(true)
+    
+    // Load current step
+    const savedStep = localStorage.getItem('dashboard_current_step')
+    if (savedStep) {
+      setCurrentStep(parseInt(savedStep) || 1)
+    }
+    
+    // Load selected template
+    const savedTemplate = localStorage.getItem('dashboard_selected_template')
+    if (savedTemplate) {
+      try {
+        setSelectedTemplate(JSON.parse(savedTemplate))
+      } catch (error) {
+        console.error('Failed to parse saved template:', error)
+      }
+    }
+    
+    // Load selected features
+    const savedFeatures = localStorage.getItem('dashboard_selected_features')
+    if (savedFeatures) {
+      try {
+        setSelectedFeatures(JSON.parse(savedFeatures))
+      } catch (error) {
+        console.error('Failed to parse saved features:', error)
+      }
+    }
+    
+    // Load final project data
+    const savedProjectData = localStorage.getItem('dashboard_final_project_data')
+    if (savedProjectData) {
+      try {
+        setFinalProjectData(JSON.parse(savedProjectData))
+      } catch (error) {
+        console.error('Failed to parse saved project data:', error)
+      }
+    }
+    
+    // Load tech stack recommendations
+    const savedRecommendations = localStorage.getItem('dashboard_tech_stack_recommendations')
+    if (savedRecommendations) {
+      try {
+        setTechStackRecommendations(JSON.parse(savedRecommendations))
+      } catch (error) {
+        console.error('Failed to parse saved recommendations:', error)
+      }
+    }
+  }, [])
 
   const steps = [
     { id: 1, name: "Project Type", description: "Choose template" },
     { id: 2, name: "Features", description: "Select features" },
-    { id: 3, name: "Business Context", description: "Define requirements" },
-    { id: 4, name: "Generate", description: "Create project" },
-    { id: 5, name: "Architecture", description: "Review & deploy" },
+    { id: 3, name: "AI Mockup", description: "Generate wireframes" },
+    { id: 4, name: "Business Context", description: "Define requirements" },
+    { id: 5, name: "Generate", description: "Create project" },
+    { id: 6, name: "Architecture", description: "Review & deploy" },
   ]
 
+  // Save state to localStorage when it changes (only after mounting)
+  useEffect(() => {
+    if (mounted) {
+      localStorage.setItem('dashboard_current_step', currentStep.toString())
+    }
+  }, [currentStep, mounted])
+
+  useEffect(() => {
+    if (mounted) {
+      if (selectedTemplate) {
+        localStorage.setItem('dashboard_selected_template', JSON.stringify(selectedTemplate))
+      } else {
+        localStorage.removeItem('dashboard_selected_template')
+      }
+    }
+  }, [selectedTemplate, mounted])
+
+  useEffect(() => {
+    if (mounted) {
+      if (selectedFeatures.length > 0) {
+        localStorage.setItem('dashboard_selected_features', JSON.stringify(selectedFeatures))
+      } else {
+        localStorage.removeItem('dashboard_selected_features')
+      }
+    }
+  }, [selectedFeatures, mounted])
+
+  useEffect(() => {
+    if (mounted) {
+      if (finalProjectData) {
+        localStorage.setItem('dashboard_final_project_data', JSON.stringify(finalProjectData))
+      } else {
+        localStorage.removeItem('dashboard_final_project_data')
+      }
+    }
+  }, [finalProjectData, mounted])
+
+  useEffect(() => {
+    if (mounted) {
+      if (techStackRecommendations) {
+        localStorage.setItem('dashboard_tech_stack_recommendations', JSON.stringify(techStackRecommendations))
+      } else {
+        localStorage.removeItem('dashboard_tech_stack_recommendations')
+      }
+    }
+  }, [techStackRecommendations, mounted])
+
   const renderStep = () => {
     switch (currentStep) {
       case 1:
@@ -971,27 +1266,36 @@ export function MainDashboard() {
         ) : null
       case 3:
         return selectedTemplate ? (
-          <BusinessQuestionsStep
+          <AIMockupStep
             template={selectedTemplate}
-            selected={selectedFeatures}
+            selectedFeatures={selectedFeatures}
+            onNext={() => setCurrentStep(4)}
             onBack={() => setCurrentStep(2)}
-            onDone={(data, recs) => { setFinalProjectData(data); setTechStackRecommendations(recs); setCurrentStep(4) }}
           />
         ) : null
       case 4:
+        return selectedTemplate ? (
+          <BusinessQuestionsStep
+            template={selectedTemplate}
+            selected={selectedFeatures}
+            onBack={() => setCurrentStep(3)}
+            onDone={(data, recs) => { setFinalProjectData(data); setTechStackRecommendations(recs); setCurrentStep(5) }}
+          />
+        ) : null
+      case 5:
         return (
           <TechStackSummaryStep
             recommendations={techStackRecommendations}
             completeData={finalProjectData}
-            onBack={() => setCurrentStep(3)}
-            onGenerate={() => setCurrentStep(5)}
+            onBack={() => setCurrentStep(4)}
+            onGenerate={() => setCurrentStep(6)}
           />
         )
-      case 5:
+      case 6:
         return (
           <ArchitectureDesignerStep
             recommendations={techStackRecommendations}
-            onBack={() => setCurrentStep(4)}
+            onBack={() => setCurrentStep(5)}
           />
         )
       default:
@@ -1003,50 +1307,64 @@ export function MainDashboard() {
     <div className="min-h-screen bg-black">
 
       {/* Progress Steps */}
-      <div className="bg-white/5 border-b border-white/10">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="py-4">
-            <nav className="flex justify-center">
-              <ol className="flex items-center space-x-8 text-white/60">
-                {steps.map((step, index) => (
-                  <li key={step.id} className="flex items-center">
-                    <div className="flex items-center">
-                      <div
-                        className={`flex items-center justify-center w-10 h-10 rounded-full border-2 transition-all ${currentStep >= step.id
-                            ? "bg-orange-500 border-orange-500 text-white shadow-lg"
-                            : currentStep === step.id - 1
-                              ? "border-orange-300 text-orange-400"
-                              : "border-white/30 text-white/40"
-                          }`}
-                      >
-                        <span className="text-sm font-semibold">{step.id}</span>
-                      </div>
-                      <div className="ml-4">
-                        <p
-                          className={`text-sm font-semibold ${currentStep >= step.id ? "text-orange-400" : "text-white/60"
-                            }`}
+      {mounted && (
+        <div className="bg-white/5 border-b border-white/10">
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div className="py-4">
+              <nav className="flex justify-center">
+                <ol className="flex items-center space-x-8 text-white/60">
+                  {steps.map((step, index) => (
+                    <li key={`step-${step.id}`} className="flex items-center">
+                      <div className="flex items-center">
+                        <div
+                          className={`flex items-center justify-center w-10 h-10 rounded-full border-2 transition-all ${currentStep >= step.id
+                              ? "bg-orange-500 border-orange-500 text-white shadow-lg"
+                              : currentStep === step.id - 1
+                                ? "border-orange-300 text-orange-400"
+                                : "border-white/30 text-white/40"
+                              }`}
                         >
-                          {step.name}
-                        </p>
-                        <p className="text-xs text-white/40">{step.description}</p>
+                          <span className="text-sm font-semibold">{step.id}</span>
+                        </div>
+                        <div className="ml-4">
+                          <p
+                            className={`text-sm font-semibold ${currentStep >= step.id ? "text-orange-400" : "text-white/60"
+                              }`}
+                          >
+                            {step.name}
+                          </p>
+                          <p className="text-xs text-white/40">{step.description}</p>
+                        </div>
                       </div>
-                    </div>
-                    {index < steps.length - 1 && (
-                      <ArrowRight
-                        className={`ml-8 h-5 w-5 ${currentStep > step.id ? "text-orange-400" : "text-white/40"}`}
-                      />
-                    )}
-                  </li>
-                ))}
-              </ol>
-            </nav>
+                      {index < steps.length - 1 && (
+                        <ArrowRight
+                          key={`arrow-${step.id}`}
+                          className={`ml-8 h-5 w-5 ${currentStep > step.id ? "text-orange-400" : "text-white/40"}`}
+                        />
+                      )}
+                    </li>
+                  ))}
+                </ol>
+              </nav>
+            </div>
           </div>
         </div>
-      </div>
+      )}
 
       {/* Main Content */}
       <main className="py-8">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">{renderStep()}</div>
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          {!mounted ? (
+            <div className="flex items-center justify-center py-12">
+              <div className="text-center space-y-4">
+                <div className="animate-spin w-8 h-8 border-2 border-orange-500 border-t-transparent rounded-full mx-auto"></div>
+                <p className="text-white/60">Loading...</p>
+              </div>
+            </div>
+          ) : (
+            renderStep()
+          )}
+        </div>
       </main>
     </div>
   )
diff --git a/src/components/prompt-side-panel.tsx b/src/components/prompt-side-panel.tsx
new file mode 100644
index 0000000..9c7538c
--- /dev/null
+++ b/src/components/prompt-side-panel.tsx
@@ -0,0 +1,250 @@
+"use client"
+
+import { useMemo, useState, useEffect } from "react"
+import { Button } from "@/components/ui/button"
+import { Textarea } from "@/components/ui/textarea"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { SelectDevice } from "@/components/ui/select-device"
+import { cn } from "@/lib/utils"
+import { getHealthUrl, config } from "@/lib/config"
+
+export function PromptSidePanel({ 
+  className,
+  selectedDevice = 'desktop',
+  onDeviceChange
+}: { 
+  className?: string
+  selectedDevice?: 'desktop' | 'tablet' | 'mobile'
+  onDeviceChange?: (device: 'desktop' | 'tablet' | 'mobile') => void
+}) {
+  const [collapsed, setCollapsed] = useState(false)
+  const [prompt, setPrompt] = useState(
+    "Dashboard with header, left sidebar, 3 stats cards, a line chart and a data table, plus footer.",
+  )
+  const [isGenerating, setIsGenerating] = useState(false)
+  const [backendStatus, setBackendStatus] = useState<'connected' | 'disconnected' | 'checking'>('checking')
+
+  const examples = useMemo(
+    () => [
+      "Landing page with header, hero, 3x2 feature grid, and footer.",
+      "Settings screen: header, list of toggles, and save button.",
+      "E‑commerce product page: header, 2-column gallery/details, reviews, sticky add-to-cart.",
+      "Dashboard: header, left sidebar, 3 stats cards, line chart, data table, footer.",
+      "Signup page: header, 2-column form, callout, submit button.",
+      "Admin panel: header, left navigation, main content area with data tables, and footer.",
+      "Product catalog: header, search bar, filter sidebar, 4x3 product grid, pagination.",
+      "Blog layout: header, featured post hero, 2-column article list, sidebar with categories.",
+    ],
+    [],
+  )
+
+  // Check backend connection status
+  useEffect(() => {
+    const checkBackendStatus = async () => {
+      try {
+        setBackendStatus('checking')
+        const response = await fetch(getHealthUrl(), {
+          method: 'GET',
+          headers: { 'Content-Type': 'application/json' },
+        })
+        
+        if (response.ok) {
+          setBackendStatus('connected')
+        } else {
+          setBackendStatus('disconnected')
+        }
+      } catch (error) {
+        console.error('Backend health check failed:', error)
+        setBackendStatus('disconnected')
+      }
+    }
+
+    checkBackendStatus()
+    
+    // Check status every 10 seconds
+    const interval = setInterval(checkBackendStatus, config.ui.statusCheckInterval)
+    return () => clearInterval(interval)
+  }, [])
+
+  const dispatchGenerate = async (text: string) => {
+    setIsGenerating(true)
+    
+    // Dispatch the event for the canvas to handle with device information
+    window.dispatchEvent(new CustomEvent("tldraw:generate", { 
+      detail: { 
+        prompt: text,
+        device: selectedDevice 
+      } 
+    }))
+    
+    // Wait a bit to show the loading state
+    setTimeout(() => setIsGenerating(false), 1000)
+  }
+
+  const dispatchClear = () => {
+    window.dispatchEvent(new Event("tldraw:clear"))
+  }
+
+  const handleDeviceChange = (device: 'desktop' | 'tablet' | 'mobile') => {
+    console.log('DEBUG: PromptSidePanel handleDeviceChange called with:', device)
+    console.log('DEBUG: Current selectedDevice prop:', selectedDevice)
+    console.log('DEBUG: onDeviceChange function exists:', !!onDeviceChange)
+    
+    if (onDeviceChange) {
+      console.log('DEBUG: Calling onDeviceChange with:', device)
+      onDeviceChange(device)
+    } else {
+      console.warn('DEBUG: onDeviceChange function not provided')
+    }
+  }
+
+  const getBackendStatusIcon = () => {
+    switch (backendStatus) {
+      case 'connected':
+        return '🟢'
+      case 'disconnected':
+        return '🔴'
+      case 'checking':
+        return '🟡'
+      default:
+        return '⚪'
+    }
+  }
+
+  const getBackendStatusText = () => {
+    switch (backendStatus) {
+      case 'connected':
+        return 'AI Backend Connected'
+      case 'disconnected':
+        return 'AI Backend Disconnected'
+      case 'checking':
+        return 'Checking Backend...'
+      default:
+        return 'Unknown Status'
+    }
+  }
+
+  return (
+    <aside
+      className={cn(
+        "h-full border-l bg-white dark:bg-neutral-900 flex flex-col",
+        collapsed ? "w-15" : "w-96",
+        className,
+      )}
+      aria-label="AI prompt side panel"
+    >
+      <div className="flex items-center justify-between px-3 py-2 border-b">
+        <h2 className={cn("text-sm font-medium text-balance", collapsed && "sr-only")}>AI Wireframe</h2>
+        <Button variant="ghost" size="icon" onClick={() => setCollapsed((c) => !c)} aria-label="Toggle panel">
+          {collapsed ? <span aria-hidden>›</span> : <span aria-hidden>‹</span>}
+        </Button>
+      </div>
+
+      {!collapsed && (
+        <div className="flex flex-col gap-3 p-3">
+          {/* Backend Status */}
+          <div className={cn(
+            "flex items-center gap-2 px-3 py-2 rounded-lg text-xs",
+            backendStatus === 'connected' ? 'bg-green-50 text-green-700 border border-green-200' :
+            backendStatus === 'disconnected' ? 'bg-red-50 text-red-700 border border-red-200' :
+            'bg-yellow-50 text-yellow-700 border border-yellow-200'
+          )}>
+            <span>{getBackendStatusIcon()}</span>
+            <span className="font-medium">{getBackendStatusText()}</span>
+          </div>
+
+          <label className="text-xs font-medium">Prompt</label>
+          <Textarea
+            value={prompt}
+            onChange={(e) => setPrompt(e.target.value)}
+            placeholder="Describe your screen: Landing with header, hero, 3x2 features, footer"
+            className="min-h-28"
+            disabled={isGenerating}
+          />
+          
+          <div className="space-y-2">
+            <label className="text-xs font-medium">Device Type</label>
+            <SelectDevice
+              value={selectedDevice}
+              onValueChange={handleDeviceChange}
+              disabled={isGenerating}
+            />
+            <div className="flex items-center gap-2 text-xs">
+              <span className="font-medium">Current:</span>
+              <span className={cn(
+                "px-2 py-1 rounded-full text-xs font-medium",
+                selectedDevice === "desktop" && "bg-blue-100 text-blue-700",
+                selectedDevice === "tablet" && "bg-green-100 text-green-700",
+                selectedDevice === "mobile" && "bg-purple-100 text-purple-700"
+              )}>
+                {selectedDevice.charAt(0).toUpperCase() + selectedDevice.slice(1)}
+              </span>
+            </div>
+            <p className="text-xs text-gray-500">
+              {selectedDevice === "desktop" && "Desktop layout with full navigation and sidebar"}
+              {selectedDevice === "tablet" && "Tablet layout with responsive navigation"}
+              {selectedDevice === "mobile" && "Mobile-first layout with stacked elements"}
+            </p>
+          </div>
+          <div className="flex gap-2">
+            <Button 
+              onClick={() => dispatchGenerate(prompt)} 
+              className="flex-1"
+              disabled={isGenerating || backendStatus !== 'connected'}
+            >
+              {isGenerating ? 'Generating...' : `Generate for ${selectedDevice}`}
+            </Button>
+            <Button variant="secondary" onClick={dispatchClear} disabled={isGenerating}>
+              Clear
+            </Button>
+          </div>
+
+          {backendStatus === 'disconnected' && (
+            <div className="bg-amber-50 border border-amber-200 rounded-lg p-3">
+              <p className="text-xs text-amber-700">
+                <strong>Backend not connected.</strong> Make sure your Flask backend is running on port 5000.
+                The system will use fallback generation instead.
+              </p>
+            </div>
+          )}
+
+          <div className="pt-1">
+            <p className="text-xs font-medium mb-2">Examples</p>
+            <ScrollArea className="h-40 border rounded">
+              <ul className="p-2 space-y-2">
+                {examples.map((ex) => (
+                  <li key={ex}>
+                    <button
+                      type="button"
+                      onClick={() => setPrompt(ex)}
+                      className="text-left text-xs w-full hover:bg-neutral-50 dark:hover:bg-neutral-800 rounded px-2 py-1"
+                      disabled={isGenerating}
+                    >
+                      {ex}
+                    </button>
+                  </li>
+                ))}
+              </ul>
+            </ScrollArea>
+          </div>
+
+          {/* AI Features Info */}
+          <div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
+            <p className="text-xs text-blue-700">
+              <strong>AI-Powered Generation:</strong> Claude AI analyzes your prompts and creates professional wireframe layouts with proper spacing, proportions, and UX best practices.
+            </p>
+            <div className="mt-2 pt-2 border-t border-blue-200">
+              <p className="text-xs text-blue-600">
+                <strong>Device-Specific Generation:</strong><br/>
+                • <strong>Desktop:</strong> Uses single-device API for faster generation<br/>
+                • <strong>Tablet/Mobile:</strong> Uses multi-device API for responsive layouts
+              </p>
+            </div>
+          </div>
+        </div>
+      )}
+    </aside>
+  )
+}
+
+export default PromptSidePanel
diff --git a/src/components/prompt-toolbar.tsx b/src/components/prompt-toolbar.tsx
new file mode 100644
index 0000000..a92f18b
--- /dev/null
+++ b/src/components/prompt-toolbar.tsx
@@ -0,0 +1,72 @@
+"use client"
+
+import type React from "react"
+
+import { useState } from "react"
+
+export default function PromptToolbar({
+  busy,
+  onGenerate,
+  onClear,
+  onExample,
+}: {
+  busy?: boolean
+  onGenerate: (prompt: string) => void
+  onClear: () => void
+  onExample: (text: string) => void
+}) {
+  const [prompt, setPrompt] = useState("Dashboard with header, sidebar, 3x2 cards grid, and footer")
+
+  const submit = (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!prompt.trim() || busy) return
+    onGenerate(prompt.trim())
+  }
+
+  const examples = [
+    "Marketing landing page with hero, 3x2 features grid, signup form, and footer",
+    "Simple login screen with header and centered form",
+    "Ecommerce product grid 4x2 with header, sidebar filters, and footer",
+    "Admin dashboard with header, sidebar, 2x2 cards and a form",
+  ]
+
+  return (
+    <div className="flex flex-col gap-3">
+      <form onSubmit={submit} className="flex items-center gap-2">
+        <input
+          aria-label="Prompt"
+          value={prompt}
+          onChange={(e) => setPrompt(e.target.value)}
+          placeholder="e.g., Dashboard with header, sidebar, 3x2 cards grid, and footer"
+          className="flex-1 rounded-md border border-gray-300 px-3 py-2 text-sm outline-none focus:border-blue-500"
+        />
+        <button
+          type="submit"
+          disabled={busy}
+          className="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-60"
+        >
+          {busy ? "Generating…" : "Generate"}
+        </button>
+        <button
+          type="button"
+          onClick={onClear}
+          className="rounded-md border border-gray-300 bg-white px-3 py-2 text-sm font-medium text-gray-800 hover:bg-gray-50"
+        >
+          Clear
+        </button>
+      </form>
+      <div className="flex flex-wrap items-center gap-2">
+        <span className="text-xs text-gray-600">Try:</span>
+        {examples.map((ex) => (
+          <button
+            key={ex}
+            onClick={() => onExample(ex)}
+            className="rounded-full border border-gray-200 bg-white px-3 py-1 text-xs text-gray-800 hover:bg-gray-50"
+          >
+            {ex}
+          </button>
+        ))}
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/ui/accordion.tsx b/src/components/ui/accordion.tsx
new file mode 100644
index 0000000..4a8cca4
--- /dev/null
+++ b/src/components/ui/accordion.tsx
@@ -0,0 +1,66 @@
+"use client"
+
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDownIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("border-b last:border-b-0", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      {...props}
+    >
+      <div className={cn("pt-0 pb-4", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
diff --git a/src/components/ui/alert-dialog.tsx b/src/components/ui/alert-dialog.tsx
new file mode 100644
index 0000000..0863e40
--- /dev/null
+++ b/src/components/ui/alert-dialog.tsx
@@ -0,0 +1,157 @@
+"use client"
+
+import * as React from "react"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+
+import { cn } from "@/lib/utils"
+import { buttonVariants } from "@/components/ui/button"
+
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  )
+}
+
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  )
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  )
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn("text-lg font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+  return (
+    <AlertDialogPrimitive.Action
+      className={cn(buttonVariants(), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogCancel({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+  return (
+    <AlertDialogPrimitive.Cancel
+      className={cn(buttonVariants({ variant: "outline" }), className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+}
diff --git a/src/components/ui/breadcrumb.tsx b/src/components/ui/breadcrumb.tsx
new file mode 100644
index 0000000..eb88f32
--- /dev/null
+++ b/src/components/ui/breadcrumb.tsx
@@ -0,0 +1,109 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { ChevronRight, MoreHorizontal } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn("inline-flex items-center gap-1.5", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean
+}) {
+  const Comp = asChild ? Slot : "a"
+
+  return (
+    <Comp
+      data-slot="breadcrumb-link"
+      className={cn("hover:text-foreground transition-colors", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("text-foreground font-normal", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("[&>svg]:size-3.5", className)}
+      {...props}
+    >
+      {children ?? <ChevronRight />}
+    </li>
+  )
+}
+
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("flex size-9 items-center justify-center", className)}
+      {...props}
+    >
+      <MoreHorizontal className="size-4" />
+      <span className="sr-only">More</span>
+    </span>
+  )
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 35bd8b5..cb06d8c 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -56,4 +56,4 @@ function Button({
   )
 }
 
-export { Button, buttonVariants }
+export { Button, buttonVariants }
\ No newline at end of file
diff --git a/src/components/ui/chart.tsx b/src/components/ui/chart.tsx
new file mode 100644
index 0000000..97cc280
--- /dev/null
+++ b/src/components/ui/chart.tsx
@@ -0,0 +1,353 @@
+"use client"
+
+import * as React from "react"
+import * as RechartsPrimitive from "recharts"
+
+import { cn } from "@/lib/utils"
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: "", dark: ".dark" } as const
+
+export type ChartConfig = {
+  [k in string]: {
+    label?: React.ReactNode
+    icon?: React.ComponentType
+  } & (
+    | { color?: string; theme?: never }
+    | { color?: never; theme: Record<keyof typeof THEMES, string> }
+  )
+}
+
+type ChartContextProps = {
+  config: ChartConfig
+}
+
+const ChartContext = React.createContext<ChartContextProps | null>(null)
+
+function useChart() {
+  const context = React.useContext(ChartContext)
+
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />")
+  }
+
+  return context
+}
+
+function ChartContainer({
+  id,
+  className,
+  children,
+  config,
+  ...props
+}: React.ComponentProps<"div"> & {
+  config: ChartConfig
+  children: React.ComponentProps<
+    typeof RechartsPrimitive.ResponsiveContainer
+  >["children"]
+}) {
+  const uniqueId = React.useId()
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-slot="chart"
+        data-chart={chartId}
+        className={cn(
+          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+          className
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer>
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  )
+}
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+  const colorConfig = Object.entries(config).filter(
+    ([, config]) => config.theme || config.color
+  )
+
+  if (!colorConfig.length) {
+    return null
+  }
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color =
+      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
+      itemConfig.color
+    return color ? `  --color-${key}: ${color};` : null
+  })
+  .join("\n")}
+}
+`
+          )
+          .join("\n"),
+      }}
+    />
+  )
+}
+
+const ChartTooltip = RechartsPrimitive.Tooltip
+
+function ChartTooltipContent({
+  active,
+  payload,
+  className,
+  indicator = "dot",
+  hideLabel = false,
+  hideIndicator = false,
+  label,
+  labelFormatter,
+  labelClassName,
+  formatter,
+  color,
+  nameKey,
+  labelKey,
+}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+  React.ComponentProps<"div"> & {
+    hideLabel?: boolean
+    hideIndicator?: boolean
+    indicator?: "line" | "dot" | "dashed"
+    nameKey?: string
+    labelKey?: string
+  }) {
+  const { config } = useChart()
+
+  const tooltipLabel = React.useMemo(() => {
+    if (hideLabel || !payload?.length) {
+      return null
+    }
+
+    const [item] = payload
+    const key = `${labelKey || item?.dataKey || item?.name || "value"}`
+    const itemConfig = getPayloadConfigFromPayload(config, item, key)
+    const value =
+      !labelKey && typeof label === "string"
+        ? config[label as keyof typeof config]?.label || label
+        : itemConfig?.label
+
+    if (labelFormatter) {
+      return (
+        <div className={cn("font-medium", labelClassName)}>
+          {labelFormatter(value, payload)}
+        </div>
+      )
+    }
+
+    if (!value) {
+      return null
+    }
+
+    return <div className={cn("font-medium", labelClassName)}>{value}</div>
+  }, [
+    label,
+    labelFormatter,
+    payload,
+    hideLabel,
+    labelClassName,
+    config,
+    labelKey,
+  ])
+
+  if (!active || !payload?.length) {
+    return null
+  }
+
+  const nestLabel = payload.length === 1 && indicator !== "dot"
+
+  return (
+    <div
+      className={cn(
+        "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
+        className
+      )}
+    >
+      {!nestLabel ? tooltipLabel : null}
+      <div className="grid gap-1.5">
+        {payload.map((item, index) => {
+          const key = `${nameKey || item.name || item.dataKey || "value"}`
+          const itemConfig = getPayloadConfigFromPayload(config, item, key)
+          const indicatorColor = color || item.payload.fill || item.color
+
+          return (
+            <div
+              key={item.dataKey}
+              className={cn(
+                "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
+                indicator === "dot" && "items-center"
+              )}
+            >
+              {formatter && item?.value !== undefined && item.name ? (
+                formatter(item.value, item.name, item, index, item.payload)
+              ) : (
+                <>
+                  {itemConfig?.icon ? (
+                    <itemConfig.icon />
+                  ) : (
+                    !hideIndicator && (
+                      <div
+                        className={cn(
+                          "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
+                          {
+                            "h-2.5 w-2.5": indicator === "dot",
+                            "w-1": indicator === "line",
+                            "w-0 border-[1.5px] border-dashed bg-transparent":
+                              indicator === "dashed",
+                            "my-0.5": nestLabel && indicator === "dashed",
+                          }
+                        )}
+                        style={
+                          {
+                            "--color-bg": indicatorColor,
+                            "--color-border": indicatorColor,
+                          } as React.CSSProperties
+                        }
+                      />
+                    )
+                  )}
+                  <div
+                    className={cn(
+                      "flex flex-1 justify-between leading-none",
+                      nestLabel ? "items-end" : "items-center"
+                    )}
+                  >
+                    <div className="grid gap-1.5">
+                      {nestLabel ? tooltipLabel : null}
+                      <span className="text-muted-foreground">
+                        {itemConfig?.label || item.name}
+                      </span>
+                    </div>
+                    {item.value && (
+                      <span className="text-foreground font-mono font-medium tabular-nums">
+                        {item.value.toLocaleString()}
+                      </span>
+                    )}
+                  </div>
+                </>
+              )}
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+const ChartLegend = RechartsPrimitive.Legend
+
+function ChartLegendContent({
+  className,
+  hideIcon = false,
+  payload,
+  verticalAlign = "bottom",
+  nameKey,
+}: React.ComponentProps<"div"> &
+  Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+    hideIcon?: boolean
+    nameKey?: string
+  }) {
+  const { config } = useChart()
+
+  if (!payload?.length) {
+    return null
+  }
+
+  return (
+    <div
+      className={cn(
+        "flex items-center justify-center gap-4",
+        verticalAlign === "top" ? "pb-3" : "pt-3",
+        className
+      )}
+    >
+      {payload.map((item) => {
+        const key = `${nameKey || item.dataKey || "value"}`
+        const itemConfig = getPayloadConfigFromPayload(config, item, key)
+
+        return (
+          <div
+            key={item.value}
+            className={cn(
+              "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
+            )}
+          >
+            {itemConfig?.icon && !hideIcon ? (
+              <itemConfig.icon />
+            ) : (
+              <div
+                className="h-2 w-2 shrink-0 rounded-[2px]"
+                style={{
+                  backgroundColor: item.color,
+                }}
+              />
+            )}
+            {itemConfig?.label}
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(
+  config: ChartConfig,
+  payload: unknown,
+  key: string
+) {
+  if (typeof payload !== "object" || payload === null) {
+    return undefined
+  }
+
+  const payloadPayload =
+    "payload" in payload &&
+    typeof payload.payload === "object" &&
+    payload.payload !== null
+      ? payload.payload
+      : undefined
+
+  let configLabelKey: string = key
+
+  if (
+    key in payload &&
+    typeof payload[key as keyof typeof payload] === "string"
+  ) {
+    configLabelKey = payload[key as keyof typeof payload] as string
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+  ) {
+    configLabelKey = payloadPayload[
+      key as keyof typeof payloadPayload
+    ] as string
+  }
+
+  return configLabelKey in config
+    ? config[configLabelKey]
+    : config[key as keyof typeof config]
+}
+
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+}
diff --git a/src/components/ui/scroll-area.tsx b/src/components/ui/scroll-area.tsx
new file mode 100644
index 0000000..8e4fa13
--- /dev/null
+++ b/src/components/ui/scroll-area.tsx
@@ -0,0 +1,58 @@
+"use client"
+
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  )
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px transition-colors select-none",
+        orientation === "vertical" &&
+          "h-full w-2.5 border-l border-l-transparent",
+        orientation === "horizontal" &&
+          "h-2.5 flex-col border-t border-t-transparent",
+        className
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="bg-border relative flex-1 rounded-full"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  )
+}
+
+export { ScrollArea, ScrollBar }
diff --git a/src/components/ui/select-device.tsx b/src/components/ui/select-device.tsx
new file mode 100644
index 0000000..bf4ffca
--- /dev/null
+++ b/src/components/ui/select-device.tsx
@@ -0,0 +1,65 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+
+type Device = "desktop" | "tablet" | "mobile"
+
+export interface SelectDeviceProps extends React.HTMLAttributes<HTMLDivElement> {
+  value: Device
+  onValueChange: (value: Device) => void
+  disabled?: boolean
+}
+
+export function SelectDevice({
+  value,
+  onValueChange,
+  disabled,
+  className,
+  ...props
+}: SelectDeviceProps) {
+  return (
+    <div 
+      className={cn(
+        "flex items-center gap-1 p-1 bg-neutral-100 rounded-lg", 
+        disabled && "opacity-50 cursor-not-allowed",
+        className
+      )} 
+      {...props}
+    >
+      <button
+        type="button"
+        onClick={() => onValueChange("desktop")}
+        disabled={disabled}
+        className={cn(
+          "flex-1 px-3 py-1 text-xs rounded-md transition-colors",
+          value === "desktop" ? "bg-white shadow text-blue-600" : "text-neutral-600 hover:bg-white/50"
+        )}
+      >
+        Desktop
+      </button>
+      <button
+        type="button"
+        onClick={() => onValueChange("tablet")}
+        disabled={disabled}
+        className={cn(
+          "flex-1 px-3 py-1 text-xs rounded-md transition-colors",
+          value === "tablet" ? "bg-white shadow text-blue-600" : "text-neutral-600 hover:bg-white/50"
+        )}
+      >
+        Tablet
+      </button>
+      <button
+        type="button"
+        onClick={() => onValueChange("mobile")}
+        disabled={disabled}
+        className={cn(
+          "flex-1 px-3 py-1 text-xs rounded-md transition-colors",
+          value === "mobile" ? "bg-white shadow text-blue-600" : "text-neutral-600 hover:bg-white/50"
+        )}
+      >
+        Mobile
+      </button>
+    </div>
+  )
+}
diff --git a/src/components/ui/table.tsx b/src/components/ui/table.tsx
new file mode 100644
index 0000000..51b74dd
--- /dev/null
+++ b/src/components/ui/table.tsx
@@ -0,0 +1,116 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("text-muted-foreground mt-4 text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
index 9f9a6dc..7f21b5e 100644
--- a/src/components/ui/textarea.tsx
+++ b/src/components/ui/textarea.tsx
@@ -2,23 +2,17 @@ import * as React from "react"
 
 import { cn } from "@/lib/utils"
 
-export interface TextareaProps
-  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
-
-const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ className, ...props }, ref) => {
-    return (
-      <textarea
-        className={cn(
-          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    )
-  }
-)
-Textarea.displayName = "Textarea"
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
 
 export { Textarea }
diff --git a/src/components/wireframe-canvas.tsx b/src/components/wireframe-canvas.tsx
new file mode 100644
index 0000000..c2fb83e
--- /dev/null
+++ b/src/components/wireframe-canvas.tsx
@@ -0,0 +1,1394 @@
+
+
+"use client"
+
+import "@tldraw/tldraw/tldraw.css"
+import { Tldraw, type Editor, createShapeId, toRichText } from "@tldraw/tldraw"
+import { useEffect, useRef, useState } from "react"
+import { cn } from "@/lib/utils"
+import { getWireframeGenerationUrl, getWireframeUrl, getWireframeByIdUrl } from "@/lib/config"
+import { useAuth } from "@/contexts/auth-context"
+import { getAccessToken } from "@/components/apis/authApiClients"
+import { authApiClient, getRefreshToken, setTokens, clearTokens } from "@/components/apis/authApiClients"
+
+import { parseSVG, makeAbsolute } from 'svg-path-parser'
+
+export default function WireframeCanvas({ 
+  className, 
+  onWireframeGenerated,
+  onGenerationStart,
+  selectedDevice
+}: { 
+  className?: string
+  onWireframeGenerated?: (data: any) => void
+  onGenerationStart?: () => void
+  selectedDevice: 'desktop' | 'tablet' | 'mobile' // Make selectedDevice required
+}) {
+  const editorRef = useRef<Editor | null>(null)
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [currentWireframeId, setCurrentWireframeId] = useState<string | null>(null)
+  const [autoSaveEnabled, setAutoSaveEnabled] = useState(true)
+  const [lastSaved, setLastSaved] = useState<Date | null>(null)
+  const { user } = useAuth()
+  
+  const isAuthenticated = !!user
+
+  const handleMount = (editor: Editor) => {
+    editorRef.current = editor
+  }
+
+  const handleClear = () => {
+    const editor = editorRef.current
+    if (!editor) return
+    editor.selectAll()
+    editor.deleteShapes(editor.getSelectedShapeIds())
+    setError(null)
+    // Clear current wireframe ID when clearing canvas
+    setCurrentWireframeId(null)
+    setLastSaved(null)
+  }
+
+  // Auto-save wireframe data
+  const saveWireframe = async (editor: Editor, isAutoSave: boolean = true) => {
+    try {
+      if (!editor) return
+      
+      // Check if user is authenticated
+      if (!isAuthenticated) {
+        console.warn('User not authenticated, skipping save')
+        return
+      }
+      
+      // Get current user
+      const currentUser = user
+      if (!currentUser || !currentUser.id) {
+        console.warn('No valid user found, skipping save')
+        return
+      }
+      
+      // Get all shapes from the editor
+      const shapes = editor.getCurrentPageShapes()
+      console.log('Saving wireframe with', shapes.length, 'shapes')
+      
+      if (shapes.length === 0) {
+        console.log('No shapes to save, skipping')
+        return
+      }
+      
+      // Debug: Log the device type being used
+      console.log('DEBUG: saveWireframe called with selectedDevice:', selectedDevice)
+      console.log('DEBUG: selectedDevice prop value:', selectedDevice)
+      console.log('DEBUG: selectedDevice type:', typeof selectedDevice)
+      console.log('DEBUG: selectedDevice === undefined:', selectedDevice === undefined)
+      console.log('DEBUG: selectedDevice === null:', selectedDevice === null)
+      console.log('DEBUG: selectedDevice === "desktop":', selectedDevice === 'desktop')
+      console.log('DEBUG: selectedDevice === "mobile":', selectedDevice === 'mobile')
+      console.log('DEBUG: selectedDevice === "tablet":', selectedDevice === 'tablet')
+      
+      // Validate and ensure selectedDevice is always a valid value
+      const validDeviceTypes = ['desktop', 'tablet', 'mobile'] as const
+      const deviceType = validDeviceTypes.includes(selectedDevice) ? selectedDevice : 'desktop'
+      console.log('DEBUG: Validated device type:', deviceType)
+      
+      // Convert shapes to our format
+      const elements = shapes.map((shape: any) => ({
+        id: shape.id,
+        type: shape.type,
+        data: shape,
+        position: { x: shape.x, y: shape.y },
+        size: { width: shape.props?.w || 100, height: shape.props?.h || 100 },
+        style: {
+          color: shape.style?.color,
+          strokeWidth: shape.style?.strokeWidth,
+          fill: shape.style?.fill
+        },
+        parent_id: shape.parentId,
+        z_index: shape.childIndex || 0
+      }))
+      
+      const wireframeData = {
+        wireframe: {
+          id: currentWireframeId,
+          name: `Wireframe ${new Date().toLocaleString()}`,
+          description: 'AI-generated wireframe',
+          device_type: deviceType, // Use the selected device type instead of hardcoded 'desktop'
+          dimensions: { width: 1440, height: 1024 },
+          metadata: { prompt: 'AI generated', timestamp: new Date().toISOString() }
+        },
+        elements: elements,
+        user_id: currentUser.id, // Get from authenticated user
+        project_id: null
+      }
+      
+      // Debug: Log the final wireframe data being sent
+      console.log('DEBUG: Final wireframe data being sent:', JSON.stringify(wireframeData, null, 2))
+      console.log('DEBUG: Final device_type value:', wireframeData.wireframe.device_type)
+      
+      const url = currentWireframeId 
+        ? getWireframeByIdUrl(currentWireframeId)
+        : getWireframeUrl()
+      
+      const method = currentWireframeId ? 'PUT' : 'POST'
+      
+      console.log('Saving wireframe to:', url, 'with method:', method)
+      console.log('Wireframe data:', wireframeData)
+      
+      // Perform request with current token
+      const doRequest = async (token?: string) => fetch(url, {
+        method,
+        headers: {
+          'Content-Type': 'application/json',
+          ...(token ? { 'Authorization': `Bearer ${token}` } : (getAccessToken() ? { 'Authorization': `Bearer ${getAccessToken()}` } : {})),
+        },
+        body: JSON.stringify(wireframeData)
+      })
+
+      let response = await doRequest()
+      
+      console.log('Save response status:', response.status, response.statusText)
+      
+      if (response.ok) {
+        const result = await response.json()
+        console.log('Save response:', result)
+        if (!currentWireframeId && result.wireframe_id) {
+          setCurrentWireframeId(result.wireframe_id)
+        }
+        setLastSaved(new Date())
+        if (!isAutoSave) {
+          console.log('Wireframe saved successfully')
+        }
+      } else {
+        const errorText = await response.text()
+        console.error('Save failed with status:', response.status, 'Error:', errorText)
+        
+        // Handle specific error cases
+        if (response.status === 401) {
+          // Attempt silent token refresh then retry once
+          try {
+            const rt = getRefreshToken()
+            if (!rt) throw new Error('Missing refresh token')
+            const refreshResp = await authApiClient.post('/api/auth/refresh', { refreshToken: rt })
+            const { accessToken: newAccessToken, refreshToken: newRefreshToken } = refreshResp.data.data.tokens
+            setTokens(newAccessToken, newRefreshToken)
+            console.log('DEBUG: Token refreshed. Retrying save...')
+            response = await doRequest(newAccessToken)
+            if (response.ok) {
+              const result = await response.json()
+              console.log('Save response after refresh:', result)
+              if (!currentWireframeId && result.wireframe_id) {
+                setCurrentWireframeId(result.wireframe_id)
+              }
+              setLastSaved(new Date())
+              if (!isAutoSave) {
+                console.log('Wireframe saved successfully (after refresh)')
+              }
+              return
+            }
+            // If still not ok, fall through to throw
+          } catch (refreshErr) {
+            console.error('Error saving wireframe: Token refresh failed', refreshErr)
+            clearTokens()
+            throw new Error('Authentication error: Token has expired. Please sign in again.')
+          }
+          throw new Error(`Authentication failed (${response.status}). Please try logging in again.`)
+        } else if (response.status === 403) {
+          throw new Error('Access denied. You may not have permission to save wireframes.')
+        } else if (response.status >= 500) {
+          throw new Error(`Server error (${response.status}). Please try again later.`)
+        } else {
+          throw new Error(`Failed to save wireframe: ${response.status} ${errorText}`)
+        }
+      }
+    } catch (err) {
+      console.error('Error saving wireframe:', err)
+      if (!isAutoSave) {
+        // Provide more specific error messages
+        if (err instanceof Error) {
+          if (err.message.includes('Authentication error') || err.message.includes('Authentication failed')) {
+            setError(err.message)
+          } else if (err.message.includes('Failed to fetch') || err.message.includes('NetworkError')) {
+            setError('Network error. Please check your connection and try again.')
+          } else {
+            setError(err.message)
+          }
+        } else {
+          setError('Failed to save wireframe. Please try again.')
+        }
+      }
+    }
+  }
+
+  // Load wireframe data
+  const loadWireframe = async (wireframeId: string) => {
+    try {
+      setBusy(true)
+      
+      // Check if user is authenticated
+      if (!isAuthenticated) {
+        setError('Authentication required to load wireframes')
+        return
+      }
+      
+      const response = await fetch(getWireframeByIdUrl(wireframeId), {
+        headers: {
+          'Content-Type': 'application/json',
+          ...(getAccessToken() ? { 'Authorization': `Bearer ${getAccessToken()}` } : {}),
+        }
+      })
+      
+      if (response.ok) {
+        const data = await response.json()
+        const editor = editorRef.current
+        if (!editor) return
+        
+        // Clear existing canvas
+        editor.selectAll()
+        editor.deleteShapes(editor.getSelectedShapeIds())
+        
+        // Load elements
+        if (data.elements && Array.isArray(data.elements)) {
+          data.elements.forEach((element: any) => {
+            try {
+              // Create shape from element data
+              const shapeData = element.data
+              if (shapeData && shapeData.type) {
+                editor.createShape(shapeData)
+              }
+            } catch (shapeError) {
+              console.warn('Failed to load shape:', element.id, shapeError)
+            }
+          })
+        }
+        
+        setCurrentWireframeId(wireframeId)
+        setLastSaved(new Date())
+        console.log('Wireframe loaded successfully')
+      } else {
+        throw new Error('Failed to load wireframe')
+      }
+    } catch (err) {
+      console.error('Error loading wireframe:', err)
+      setError('Failed to load wireframe')
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  // Enhanced color mapping with comprehensive hex support
+  const mapColorToTldraw = (hexColor: string): string => {
+    if (!hexColor) return 'black'
+    
+    // Normalize hex color
+    const normalizedColor = hexColor.toLowerCase().trim()
+    
+    // Handle named colors
+    const namedColors: Record<string, string> = {
+      'red': 'red',
+      'green': 'green',
+      'blue': 'blue',
+      'yellow': 'yellow',
+      'orange': 'orange',
+      'purple': 'violet',
+      'violet': 'violet',
+      'pink': 'light-red',
+      'cyan': 'light-blue',
+      'lime': 'light-green',
+      'black': 'black',
+      'white': 'grey',
+      'gray': 'grey',
+      'grey': 'grey',
+      'none': 'black',
+      'transparent': 'black'
+    }
+    
+    if (namedColors[normalizedColor]) {
+      return namedColors[normalizedColor]
+    }
+    
+    // Direct hex mappings
+    const colorMap: Record<string, string> = {
+      '#0ea5e9': 'blue',
+      '#3b82f6': 'blue',
+      '#1d4ed8': 'blue',
+      '#2563eb': 'blue',
+      '#1e40af': 'blue',
+      '#64748b': 'grey',
+      '#6b7280': 'grey',
+      '#9ca3af': 'grey',
+      '#d1d5db': 'grey',
+      '#f8fafc': 'grey',
+      '#f1f5f9': 'grey',
+      '#ffffff': 'grey',
+      '#000000': 'black',
+      '#1f2937': 'black',
+      '#111827': 'black',
+      '#ef4444': 'red',
+      '#dc2626': 'red',
+      '#b91c1c': 'red',
+      '#991b1b': 'red',
+      '#10b981': 'green',
+      '#059669': 'green',
+      '#047857': 'green',
+      '#065f46': 'green',
+      '#f59e0b': 'yellow',
+      '#d97706': 'yellow',
+      '#b45309': 'yellow',
+      '#92400e': 'yellow',
+      '#8b5cf6': 'violet',
+      '#7c3aed': 'violet',
+      '#6d28d9': 'violet',
+      '#5b21b6': 'violet',
+      '#ec4899': 'light-red',
+      '#db2777': 'light-red',
+      '#be185d': 'light-red',
+      '#9d174d': 'light-red',
+      '#06b6d4': 'light-blue',
+      '#0891b2': 'light-blue',
+      '#0e7490': 'light-blue',
+      '#155e75': 'light-blue',
+      '#84cc16': 'light-green',
+      '#65a30d': 'light-green',
+      '#4d7c0f': 'light-green',
+      '#365314': 'light-green',
+      '#f97316': 'orange',
+      '#ea580c': 'orange',
+      '#c2410c': 'orange',
+      '#9a3412': 'orange',
+      '#a855f7': 'light-violet',
+      '#9333ea': 'light-violet',
+      '#7e22ce': 'light-violet',
+      '#6b21a8': 'light-violet'
+    }
+    
+    // If exact match found, return it
+    if (colorMap[normalizedColor]) {
+      return colorMap[normalizedColor]
+    }
+    
+    // Parse RGB values for approximate matching
+    let r, g, b
+    if (normalizedColor.startsWith('#')) {
+      const hex = normalizedColor.slice(1)
+      if (hex.length === 3) {
+        r = parseInt(hex[0] + hex[0], 16)
+        g = parseInt(hex[1] + hex[1], 16)
+        b = parseInt(hex[2] + hex[2], 16)
+      } else if (hex.length === 6) {
+        r = parseInt(hex.slice(0, 2), 16)
+        g = parseInt(hex.slice(2, 4), 16)
+        b = parseInt(hex.slice(4, 6), 16)
+      }
+    } else if (normalizedColor.startsWith('rgb')) {
+      // Handle rgb() format
+      const rgbMatch = normalizedColor.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/)
+      if (rgbMatch) {
+        r = parseInt(rgbMatch[1])
+        g = parseInt(rgbMatch[2])
+        b = parseInt(rgbMatch[3])
+      }
+    }
+    
+    if (r !== undefined && g !== undefined && b !== undefined) {
+      // Approximate color matching based on RGB values
+      if (r > 200 && g > 200 && b > 200) return 'grey' // Light colors
+      if (r < 50 && g < 50 && b < 50) return 'black' // Dark colors
+      
+      // Primary color detection
+      if (r > g + 30 && r > b + 30) return r > 150 ? 'light-red' : 'red'
+      if (g > r + 30 && g > b + 30) return g > 150 ? 'light-green' : 'green'
+      if (b > r + 30 && b > g + 30) return b > 150 ? 'light-blue' : 'blue'
+      
+      // Secondary colors
+      if (r > 150 && g > 100 && b < 100) return 'orange'
+      if (r > 100 && g < 100 && b > 150) return 'violet'
+      if (r > 150 && g > 150 && b < 100) return 'yellow'
+    }
+    
+    return 'black' // Default fallback
+  }
+
+  // Enhanced SVG parsing with better error handling and scaling
+  const parseSVGAndRender = async (editor: Editor, svgString: string) => {
+    try {
+      console.log('Parsing SVG response:', svgString.substring(0, 200) + '...')
+      
+      // Clean up the SVG string
+      let cleanSvgString = svgString.trim()
+      
+      // Extract SVG content if it's wrapped in other content
+      const svgMatch = cleanSvgString.match(/<svg[^>]*>[\s\S]*?<\/svg>/i)
+      if (svgMatch) {
+        cleanSvgString = svgMatch[0]
+      }
+      
+      // Create a temporary DOM element to parse SVG
+      const parser = new DOMParser()
+      const svgDoc = parser.parseFromString(cleanSvgString, 'image/svg+xml')
+      
+      // Check for parsing errors
+      const parserError = svgDoc.querySelector('parsererror')
+      if (parserError) {
+        throw new Error(`SVG parsing failed: ${parserError.textContent}`)
+      }
+      
+      const svgElement = svgDoc.querySelector('svg')
+      
+      if (!svgElement) {
+        throw new Error('No SVG element found in response')
+      }
+
+      // Clear existing canvas
+      editor.selectAll()
+      editor.deleteShapes(editor.getSelectedShapeIds())
+
+      // Get SVG dimensions with comprehensive fallbacks
+      let svgWidth = 800
+      let svgHeight = 600
+      let viewBoxX = 0
+      let viewBoxY = 0
+      
+      // Try to get dimensions from viewBox first
+      const viewBox = svgElement.getAttribute('viewBox')
+      if (viewBox) {
+        const viewBoxValues = viewBox.split(/\s+|,/).map(Number).filter(n => !isNaN(n))
+        if (viewBoxValues.length >= 4) {
+          [viewBoxX, viewBoxY, svgWidth, svgHeight] = viewBoxValues
+        }
+      } else {
+        // Fallback to width/height attributes
+        const widthAttr = svgElement.getAttribute('width')
+        const heightAttr = svgElement.getAttribute('height')
+        
+        if (widthAttr && heightAttr) {
+          const parsedWidth = parseFloat(widthAttr.replace(/px|pt|em|rem|%/g, ''))
+          const parsedHeight = parseFloat(heightAttr.replace(/px|pt|em|rem|%/g, ''))
+          
+          if (!isNaN(parsedWidth) && !isNaN(parsedHeight)) {
+            svgWidth = parsedWidth
+            svgHeight = parsedHeight
+          }
+        }
+      }
+      
+      // Calculate proper offset to center content
+      const canvasWidth = Math.max(1000, svgWidth + 200)
+      const canvasHeight = Math.max(700, svgHeight + 200)
+      const offsetX = (canvasWidth - svgWidth) / 2 + 50
+      const offsetY = (canvasHeight - svgHeight) / 2 + 50
+      
+      // Create main frame
+      const frameId = createShapeId()
+      editor.createShape({
+        id: frameId,
+        type: "frame",
+        x: 25,
+        y: 25,
+        props: {
+          w: canvasWidth,
+          h: canvasHeight,
+          name: "AI Generated Wireframe",
+        },
+      })
+
+      // Parse and render SVG elements
+      await renderSVGElements(editor, svgElement, offsetX - viewBoxX, offsetY - viewBoxY, svgWidth, svgHeight)
+
+      // Capture the current selectedDevice value to avoid closure issues
+      const currentDeviceType = selectedDevice
+      console.log('DEBUG: parseSVGAndRender captured device type:', currentDeviceType)
+
+      // Auto-zoom to fit content with proper timing
+      setTimeout(() => {
+        const shapes = editor.getCurrentPageShapes()
+        if (shapes.length > 0) {
+          const pageBounds = editor.getCurrentPageBounds()
+          if (pageBounds) {
+            editor.zoomToBounds(pageBounds, { 
+              animation: { duration: 600 },
+              targetZoom: Math.min(1.2, 0.85) // Add padding but don't zoom out too much
+            })
+          }
+        }
+        
+        // Save the wireframe after rendering is complete
+        setTimeout(() => {
+          console.log('DEBUG: parseSVGAndRender calling saveWireframe with device type:', currentDeviceType)
+          saveWireframe(editor, true)
+        }, 500)
+      }, 200)
+
+    } catch (error) {
+      console.error('Error parsing SVG:', error)
+      setError(`Failed to parse SVG: ${error instanceof Error ? error.message : 'Unknown error'}. Please try again.`)
+    }
+  }
+
+  // Enhanced element rendering with better transform support
+  const renderSVGElements = async (editor: Editor, svgElement: Element, offsetX: number, offsetY: number, svgWidth: number, svgHeight: number) => {
+    const elements = Array.from(svgElement.children)
+    
+    for (const element of elements) {
+      const tagName = element.tagName.toLowerCase()
+      
+      // Skip non-visual elements
+      if (['defs', 'style', 'title', 'desc', 'metadata', 'clippath', 'mask'].includes(tagName)) {
+        continue
+      }
+      
+      try {
+        // Check for visibility
+        const visibility = element.getAttribute('visibility')
+        const display = element.getAttribute('display')
+        const opacity = element.getAttribute('opacity')
+        
+        if (visibility === 'hidden' || display === 'none' || opacity === '0') {
+          continue
+        }
+        
+        switch (tagName) {
+          case 'rect':
+            await renderSVGRect(editor, element as SVGRectElement, offsetX, offsetY)
+            break
+          case 'circle':
+            await renderSVGCircle(editor, element as SVGCircleElement, offsetX, offsetY)
+            break
+          case 'ellipse':
+            await renderSVGEllipse(editor, element as SVGEllipseElement, offsetX, offsetY)
+            break
+          case 'path':
+            await renderSVGPath(editor, element as SVGPathElement, offsetX, offsetY)
+            break
+          case 'text':
+            await renderSVGText(editor, element as SVGTextElement, offsetX, offsetY)
+            break
+          case 'line':
+            await renderSVGLine(editor, element as SVGLineElement, offsetX, offsetY)
+            break
+          case 'polyline':
+          case 'polygon':
+            await renderSVGPoly(editor, element as SVGPolygonElement, offsetX, offsetY)
+            break
+          case 'g':
+            // Handle group elements with transform support
+            const transform = element.getAttribute('transform')
+            let groupOffsetX = offsetX
+            let groupOffsetY = offsetY
+            let scaleX = 1
+            let scaleY = 1
+            
+            if (transform) {
+              // Parse translate transform
+              const translateMatch = transform.match(/translate\(\s*([^)]+)\s*\)/)
+              if (translateMatch) {
+                const values = translateMatch[1].split(/[,\s]+/).map(Number).filter(n => !isNaN(n))
+                if (values.length >= 1) {
+                  groupOffsetX += values[0] || 0
+                  groupOffsetY += values[1] || values[0] || 0
+                }
+              }
+              
+              // Parse scale transform
+              const scaleMatch = transform.match(/scale\(\s*([^)]+)\s*\)/)
+              if (scaleMatch) {
+                const values = scaleMatch[1].split(/[,\s]+/).map(Number).filter(n => !isNaN(n))
+                if (values.length >= 1) {
+                  scaleX = values[0] || 1
+                  scaleY = values[1] || values[0] || 1
+                }
+              }
+            }
+            
+            await renderSVGElements(editor, element, groupOffsetX, groupOffsetY, svgWidth * scaleX, svgHeight * scaleY)
+            break
+          case 'use':
+            // Handle <use> elements (references to other elements)
+            await renderSVGUse(editor, element as SVGUseElement, offsetX, offsetY, svgElement)
+            break
+          default:
+            console.log(`Unsupported SVG element: ${tagName}`)
+        }
+      } catch (error) {
+        console.error(`Error rendering SVG element ${tagName}:`, error)
+        // Continue with other elements even if one fails
+      }
+    }
+  }
+
+  // Enhanced rectangle rendering
+  const renderSVGRect = async (editor: Editor, element: SVGRectElement, offsetX: number, offsetY: number) => {
+    const x = parseFloat(element.getAttribute('x') || '0') + offsetX
+    const y = parseFloat(element.getAttribute('y') || '0') + offsetY
+    const width = parseFloat(element.getAttribute('width') || '100')
+    const height = parseFloat(element.getAttribute('height') || '100')
+    const fill = element.getAttribute('fill') || 'none'
+    const stroke = element.getAttribute('stroke') || '#000000'
+    const strokeWidth = parseFloat(element.getAttribute('stroke-width') || '1')
+    const rx = parseFloat(element.getAttribute('rx') || '0')
+    const ry = parseFloat(element.getAttribute('ry') || '0')
+    
+    // Skip if dimensions are invalid
+    if (width <= 0 || height <= 0) return
+    
+    // Determine fill type
+    let fillType: 'none' | 'semi' | 'solid' = 'none'
+    if (fill !== 'none' && fill !== 'transparent') {
+      fillType = stroke === 'none' || stroke === 'transparent' ? 'solid' : 'semi'
+    }
+    
+    editor.createShape({
+      id: createShapeId(),
+      type: "geo",
+      x,
+      y,
+      props: {
+        w: Math.max(1, width),
+        h: Math.max(1, height),
+        geo: "rectangle",
+        fill: fillType,
+        color: mapColorToTldraw(stroke !== 'none' ? stroke : fill),
+        size: strokeWidth > 3 ? 'xl' : strokeWidth > 2 ? 'l' : strokeWidth > 1 ? 'm' : 's',
+      },
+    })
+  }
+
+  // Enhanced circle rendering
+  const renderSVGCircle = async (editor: Editor, element: SVGCircleElement, offsetX: number, offsetY: number) => {
+    const cx = parseFloat(element.getAttribute('cx') || '0') + offsetX
+    const cy = parseFloat(element.getAttribute('cy') || '0') + offsetY
+    const r = parseFloat(element.getAttribute('r') || '50')
+    const fill = element.getAttribute('fill') || 'none'
+    const stroke = element.getAttribute('stroke') || '#000000'
+    const strokeWidth = parseFloat(element.getAttribute('stroke-width') || '1')
+    
+    // Skip if radius is invalid
+    if (r <= 0) return
+    
+    let fillType: 'none' | 'semi' | 'solid' = 'none'
+    if (fill !== 'none' && fill !== 'transparent') {
+      fillType = stroke === 'none' || stroke === 'transparent' ? 'solid' : 'semi'
+    }
+    
+    editor.createShape({
+      id: createShapeId(),
+      type: "geo",
+      x: cx - r,
+      y: cy - r,
+      props: {
+        w: r * 2,
+        h: r * 2,
+        geo: "ellipse",
+        fill: fillType,
+        color: mapColorToTldraw(stroke !== 'none' ? stroke : fill),
+        size: strokeWidth > 3 ? 'xl' : strokeWidth > 2 ? 'l' : strokeWidth > 1 ? 'm' : 's',
+      },
+    })
+  }
+
+  // Enhanced ellipse rendering
+  const renderSVGEllipse = async (editor: Editor, element: SVGEllipseElement, offsetX: number, offsetY: number) => {
+    const cx = parseFloat(element.getAttribute('cx') || '0') + offsetX
+    const cy = parseFloat(element.getAttribute('cy') || '0') + offsetY
+    const rx = parseFloat(element.getAttribute('rx') || '50')
+    const ry = parseFloat(element.getAttribute('ry') || '30')
+    const fill = element.getAttribute('fill') || 'none'
+    const stroke = element.getAttribute('stroke') || '#000000'
+    const strokeWidth = parseFloat(element.getAttribute('stroke-width') || '1')
+    
+    // Skip if dimensions are invalid
+    if (rx <= 0 || ry <= 0) return
+    
+    let fillType: 'none' | 'semi' | 'solid' = 'none'
+    if (fill !== 'none' && fill !== 'transparent') {
+      fillType = stroke === 'none' || stroke === 'transparent' ? 'solid' : 'semi'
+    }
+    
+    editor.createShape({
+      id: createShapeId(),
+      type: "geo",
+      x: cx - rx,
+      y: cy - ry,
+      props: {
+        w: rx * 2,
+        h: ry * 2,
+        geo: "ellipse",
+        fill: fillType,
+        color: mapColorToTldraw(stroke !== 'none' ? stroke : fill),
+        size: strokeWidth > 3 ? 'xl' : strokeWidth > 2 ? 'l' : strokeWidth > 1 ? 'm' : 's',
+      },
+    })
+  }
+
+  // Significantly improved path rendering using svg-path-parser
+  const renderSVGPath = async (editor: Editor, element: SVGPathElement, offsetX: number, offsetY: number) => {
+    const d = element.getAttribute('d') || ''
+    const fill = element.getAttribute('fill') || 'none'
+    const stroke = element.getAttribute('stroke') || '#000000'
+    const strokeWidth = parseFloat(element.getAttribute('stroke-width') || '1')
+    
+    if (!d.trim()) return
+    
+    try {
+      // Parse the path data using svg-path-parser
+      const commands = parseSVG(d)
+      const absoluteCommands = makeAbsolute(commands)
+      
+      if (absoluteCommands.length === 0) return
+      
+      // Extract all coordinate points from the path
+      const points: Array<{x: number, y: number}> = []
+      
+      absoluteCommands.forEach((command: any) => {
+        switch (command.code) {
+          case 'M': // Move to
+          case 'L': // Line to
+            if ('x' in command && 'y' in command) {
+              points.push({ x: command.x, y: command.y })
+            }
+            break
+          case 'C': // Cubic bezier curve
+            if ('x1' in command && 'y1' in command) {
+              points.push({ x: command.x1, y: command.y1 })
+            }
+            if ('x2' in command && 'y2' in command) {
+              points.push({ x: command.x2, y: command.y2 })
+            }
+            if ('x' in command && 'y' in command) {
+              points.push({ x: command.x, y: command.y })
+            }
+            break
+          case 'Q': // Quadratic bezier curve
+            if ('x1' in command && 'y1' in command) {
+              points.push({ x: command.x1, y: command.y1 })
+            }
+            if ('x' in command && 'y' in command) {
+              points.push({ x: command.x, y: command.y })
+            }
+            break
+          case 'A': // Arc
+            if ('x' in command && 'y' in command) {
+              points.push({ x: command.x, y: command.y })
+            }
+            break
+          case 'H': // Horizontal line
+            if ('x' in command && points.length > 0) {
+              points.push({ x: command.x, y: points[points.length - 1].y })
+            }
+            break
+          case 'V': // Vertical line
+            if ('y' in command && points.length > 0) {
+              points.push({ x: points[points.length - 1].x, y: command.y })
+            }
+            break
+        }
+      })
+      
+      if (points.length === 0) return
+      
+      // Calculate bounds
+      const minX = Math.min(...points.map(p => p.x))
+      const minY = Math.min(...points.map(p => p.y))
+      const maxX = Math.max(...points.map(p => p.x))
+      const maxY = Math.max(...points.map(p => p.y))
+      
+      const width = Math.max(2, maxX - minX)
+      const height = Math.max(2, maxY - minY)
+      
+      // Determine shape type based on path characteristics
+      const isClosedPath = d.toLowerCase().includes('z')
+      const isLine = width < 3 || height < 3 || points.length <= 2
+      
+      let fillType: 'none' | 'semi' | 'solid' = 'none'
+      if (fill !== 'none' && fill !== 'transparent' && isClosedPath) {
+        fillType = stroke === 'none' || stroke === 'transparent' ? 'solid' : 'semi'
+      }
+      
+      if (isLine && !isClosedPath) {
+        // Render as line/draw shape
+        const drawPoints = points.map((point, index) => ({
+          x: point.x - minX,
+          y: point.y - minY,
+          z: 0.5
+        }))
+        
+        editor.createShape({
+          id: createShapeId(),
+          type: "draw",
+          x: minX + offsetX,
+          y: minY + offsetY,
+          props: {
+            segments: [{
+              type: "straight",
+              points: drawPoints.length > 0 ? drawPoints : [
+                { x: 0, y: 0, z: 0.5 },
+                { x: width, y: height, z: 0.5 }
+              ]
+            }],
+            color: mapColorToTldraw(stroke),
+            size: strokeWidth > 3 ? 'xl' : strokeWidth > 2 ? 'l' : strokeWidth > 1 ? 'm' : 's',
+          },
+        })
+      } else {
+        // Render as geometric shape
+        const aspectRatio = width / height
+        let geoType: 'rectangle' | 'ellipse' = 'rectangle'
+        
+        // Detect if it's more circular/elliptical
+        if (Math.abs(aspectRatio - 1) < 0.2 && isClosedPath) {
+          geoType = 'ellipse'
+        }
+        
+        editor.createShape({
+          id: createShapeId(),
+          type: "geo",
+          x: minX + offsetX,
+          y: minY + offsetY,
+          props: {
+            w: width,
+            h: height,
+            geo: geoType,
+            fill: fillType,
+            color: mapColorToTldraw(stroke !== 'none' ? stroke : fill),
+            size: strokeWidth > 3 ? 'xl' : strokeWidth > 2 ? 'l' : strokeWidth > 1 ? 'm' : 's',
+          },
+        })
+      }
+      
+    } catch (error) {
+      console.error('Error parsing path with svg-path-parser:', error)
+      // Fallback to simple rectangle
+      editor.createShape({
+        id: createShapeId(),
+        type: "geo",
+        x: offsetX,
+        y: offsetY,
+        props: {
+          w: 100,
+          h: 50,
+          geo: "rectangle",
+          fill: 'none',
+          color: mapColorToTldraw(stroke),
+        },
+      })
+    }
+  }
+
+  // Render SVG line elements
+  const renderSVGLine = async (editor: Editor, element: SVGLineElement, offsetX: number, offsetY: number) => {
+    const x1 = parseFloat(element.getAttribute('x1') || '0') + offsetX
+    const y1 = parseFloat(element.getAttribute('y1') || '0') + offsetY
+    const x2 = parseFloat(element.getAttribute('x2') || '0') + offsetX
+    const y2 = parseFloat(element.getAttribute('y2') || '0') + offsetY
+    const stroke = element.getAttribute('stroke') || '#000000'
+    const strokeWidth = parseFloat(element.getAttribute('stroke-width') || '1')
+    
+    const startX = Math.min(x1, x2)
+    const startY = Math.min(y1, y2)
+    const endX = Math.abs(x2 - x1)
+    const endY = Math.abs(y2 - y1)
+    
+    editor.createShape({
+      id: createShapeId(),
+      type: "draw",
+      x: startX,
+      y: startY,
+      props: {
+        segments: [{
+          type: "straight",
+          points: [
+            { x: 0, y: 0, z: 0.5 },
+            { x: endX, y: endY, z: 0.5 }
+          ]
+        }],
+        color: mapColorToTldraw(stroke),
+        size: strokeWidth > 3 ? 'xl' : strokeWidth > 2 ? 'l' : strokeWidth > 1 ? 'm' : 's',
+      },
+    })
+  }
+
+  // Enhanced polyline/polygon rendering
+  const renderSVGPoly = async (editor: Editor, element: SVGPolygonElement, offsetX: number, offsetY: number) => {
+    const points = element.getAttribute('points') || ''
+    const fill = element.getAttribute('fill') || 'none'
+    const stroke = element.getAttribute('stroke') || '#000000'
+    const strokeWidth = parseFloat(element.getAttribute('stroke-width') || '1')
+    
+    if (!points.trim()) return
+    
+    try {
+      // Parse points more robustly
+      const coords = points.trim()
+        .split(/[\s,]+/)
+        .map(Number)
+        .filter(n => !isNaN(n))
+        
+      if (coords.length < 4) return // Need at least 2 points (x,y pairs)
+      
+      // Extract coordinate pairs
+      const pointPairs: Array<{x: number, y: number}> = []
+      for (let i = 0; i < coords.length; i += 2) {
+        if (i + 1 < coords.length) {
+          pointPairs.push({ x: coords[i], y: coords[i + 1] })
+        }
+      }
+      
+      if (pointPairs.length < 2) return
+      
+      // Calculate bounds
+      const minX = Math.min(...pointPairs.map(p => p.x))
+      const minY = Math.min(...pointPairs.map(p => p.y))
+      const maxX = Math.max(...pointPairs.map(p => p.x))
+      const maxY = Math.max(...pointPairs.map(p => p.y))
+      
+      const width = Math.max(2, maxX - minX)
+      const height = Math.max(2, maxY - minY)
+      
+      const isPolygon = element.tagName.toLowerCase() === 'polygon'
+      
+      let fillType: 'none' | 'semi' | 'solid' = 'none'
+      if (fill !== 'none' && fill !== 'transparent' && isPolygon) {
+        fillType = stroke === 'none' || stroke === 'transparent' ? 'solid' : 'semi'
+      }
+      
+      // Convert to tldraw points
+      const drawPoints = pointPairs.map(point => ({
+        x: point.x - minX,
+        y: point.y - minY,
+        z: 0.5
+      }))
+      
+      // Add closing point for polygons
+      if (isPolygon && drawPoints.length > 0) {
+        drawPoints.push(drawPoints[0])
+      }
+      
+      editor.createShape({
+        id: createShapeId(),
+        type: "draw",
+        x: minX + offsetX,
+        y: minY + offsetY,
+        props: {
+          segments: [{
+            type: "straight",
+            points: drawPoints
+          }],
+          color: mapColorToTldraw(stroke !== 'none' ? stroke : fill),
+          size: strokeWidth > 3 ? 'xl' : strokeWidth > 2 ? 'l' : strokeWidth > 1 ? 'm' : 's',
+        },
+      })
+    } catch (error) {
+      console.error('Error parsing polygon/polyline:', error)
+      // Fallback to rectangle
+      editor.createShape({
+        id: createShapeId(),
+        type: "geo",
+        x: offsetX,
+        y: offsetY,
+        props: {
+          w: 100,
+          h: 50,
+          geo: "rectangle",
+          fill: 'none',
+          color: mapColorToTldraw(stroke),
+        },
+      })
+    }
+  }
+
+  // Enhanced text rendering with better positioning and styling
+  const renderSVGText = async (editor: Editor, element: SVGTextElement, offsetX: number, offsetY: number) => {
+    const x = parseFloat(element.getAttribute('x') || '0') + offsetX
+    const y = parseFloat(element.getAttribute('y') || '0') + offsetY
+    const textContent = element.textContent || ''
+    const fill = element.getAttribute('fill') || '#000000'
+    const fontSize = element.getAttribute('font-size') || '16'
+    const fontWeight = element.getAttribute('font-weight') || 'normal'
+    const fontFamily = element.getAttribute('font-family') || 'sans-serif'
+    const textAnchor = element.getAttribute('text-anchor') || 'start'
+    const dominantBaseline = element.getAttribute('dominant-baseline') || 'auto'
+    
+    if (!textContent.trim()) return
+    
+    // Parse font size more reliably
+    const parsedFontSize = parseFloat(fontSize.replace(/px|pt|em|rem|%/g, ''))
+    let tldrawSize: 's' | 'm' | 'l' | 'xl' = 'm'
+    
+    if (parsedFontSize <= 10) tldrawSize = 's'
+    else if (parsedFontSize <= 14) tldrawSize = 'm'
+    else if (parsedFontSize <= 20) tldrawSize = 'l'
+    else tldrawSize = 'xl'
+    
+    // Adjust position based on text anchor and baseline
+    let adjustedX = x
+    let adjustedY = y
+    
+    // Estimate text dimensions for positioning
+    const estimatedWidth = textContent.length * (parsedFontSize * 0.6)
+    const estimatedHeight = parsedFontSize
+    
+    // Adjust for text-anchor
+    switch (textAnchor) {
+      case 'middle':
+        adjustedX -= estimatedWidth / 2
+        break
+      case 'end':
+        adjustedX -= estimatedWidth
+        break
+      // 'start' is default, no adjustment needed
+    }
+    
+    // Adjust for dominant-baseline (SVG uses baseline, tldraw uses top-left)
+    switch (dominantBaseline) {
+      case 'middle':
+        adjustedY -= estimatedHeight / 2
+        break
+      case 'hanging':
+        adjustedY -= estimatedHeight
+        break
+      default:
+        adjustedY -= estimatedHeight * 0.8 // Approximate baseline adjustment
+    }
+    
+    editor.createShape({
+      id: createShapeId(),
+      type: "text",
+      x: adjustedX,
+      y: adjustedY,
+      props: {
+        richText: toRichText(textContent.trim()),
+        size: tldrawSize,
+        color: mapColorToTldraw(fill),
+        scale: 1,
+      },
+    })
+    
+    // Handle tspan elements within text
+    const tspans = element.querySelectorAll('tspan')
+    tspans.forEach((tspan, index) => {
+      const tspanText = tspan.textContent || ''
+      if (!tspanText.trim() || index === 0) return // Skip empty or first tspan (already handled)
+      
+      const dx = parseFloat(tspan.getAttribute('dx') || '0')
+      const dy = parseFloat(tspan.getAttribute('dy') || '0')
+      const tspanX = parseFloat(tspan.getAttribute('x') || x.toString())
+      const tspanY = parseFloat(tspan.getAttribute('y') || y.toString())
+      
+      editor.createShape({
+        id: createShapeId(),
+        type: "text",
+        x: (tspanX || (adjustedX + dx)) + offsetX,
+        y: (tspanY || (adjustedY + dy)) + offsetY - estimatedHeight * 0.8,
+        props: {
+          richText: toRichText(tspanText.trim()),
+          size: tldrawSize,
+          color: mapColorToTldraw(tspan.getAttribute('fill') || fill),
+          scale: 1,
+        },
+      })
+    })
+  }
+
+  // New: Handle SVG <use> elements
+  const renderSVGUse = async (editor: Editor, element: SVGUseElement, offsetX: number, offsetY: number, rootSvg: Element) => {
+    const href = element.getAttribute('href') || element.getAttribute('xlink:href') || ''
+    const x = parseFloat(element.getAttribute('x') || '0') + offsetX
+    const y = parseFloat(element.getAttribute('y') || '0') + offsetY
+    
+    if (!href.startsWith('#')) return
+    
+    // Find the referenced element
+    const refId = href.slice(1)
+    const referencedElement = rootSvg.querySelector(`#${refId}`)
+    
+    if (referencedElement) {
+      // Render the referenced element at the use position
+      await renderSVGElements(editor, referencedElement.parentElement || referencedElement, x, y, 100, 100)
+    }
+  }
+
+  const generateFromPrompt = async (prompt: string, device?: string) => {
+    const editor = editorRef.current
+    if (!editor) return
+    
+    setBusy(true)
+    setError(null)
+    
+    // Notify parent component that generation has started
+    onGenerationStart?.()
+    
+    try {
+      // Use device-specific endpoint for better performance and device-specific optimization
+      const targetDevice = device || selectedDevice || 'desktop'
+      console.log(`Generating wireframe for ${targetDevice} device using device-specific API`)
+      
+      const response = await fetch(getWireframeGenerationUrl(targetDevice as 'desktop' | 'tablet' | 'mobile'), {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Accept': 'image/svg+xml, application/xml, text/xml, text/plain, */*',
+        },
+        body: JSON.stringify({ prompt }),
+      })
+      
+      console.log(`API Response status: ${response.status}, content-type: ${response.headers.get('content-type')}`)
+
+      if (!response.ok) {
+        let errorMessage = `API Error (${response.status})`
+        try {
+          const errorText = await response.text()
+          errorMessage += `: ${errorText}`
+        } catch {
+          errorMessage += ': Unknown error'
+        }
+        throw new Error(errorMessage)
+      }
+
+      // Get response content
+      const responseText = await response.text()
+      console.log('Received response, length:', responseText.length, 'first 100 chars:', responseText.substring(0, 100))
+      
+      // Check if response contains SVG content
+      const containsSVG = responseText.trim().startsWith('<svg') || 
+                         responseText.includes('<svg') ||
+                         responseText.includes('<?xml')
+      
+      if (containsSVG) {
+        await parseSVGAndRender(editor, responseText)
+        // Save the generated wireframe
+        await saveWireframe(editor, false)
+        // Notify parent component that wireframe was generated
+        onWireframeGenerated?.({ 
+          success: true, 
+          wireframeId: currentWireframeId,
+          prompt,
+          device: targetDevice,
+          timestamp: new Date().toISOString()
+        })
+      } else {
+        // Try to extract SVG from JSON response
+        try {
+          const jsonResponse = JSON.parse(responseText)
+          if (jsonResponse.svg) {
+            await parseSVGAndRender(editor, jsonResponse.svg)
+            // Save the generated wireframe
+            await saveWireframe(editor, false)
+            // Notify parent component that wireframe was generated
+            onWireframeGenerated?.({ 
+              success: true, 
+              wireframeId: currentWireframeId,
+              prompt,
+              device: targetDevice,
+              timestamp: new Date().toISOString()
+            })
+          } else if (jsonResponse.data && jsonResponse.data.svg) {
+            await parseSVGAndRender(editor, jsonResponse.data.svg)
+            // Save the generated wireframe
+            await saveWireframe(editor, false)
+            // Notify parent component that wireframe was generated
+            onWireframeGenerated?.({ 
+              success: true, 
+              wireframeId: currentWireframeId,
+              prompt,
+              device: targetDevice,
+              timestamp: new Date().toISOString()
+            })
+          } else {
+            throw new Error('No SVG content found in response')
+          }
+        } catch (jsonError) {
+          throw new Error('Backend returned non-SVG response and failed to parse as JSON. Expected SVG format.')
+        }
+      }
+
+    } catch (err) {
+      console.error('Error generating wireframe:', err)
+      setError(err instanceof Error ? err.message : 'Failed to generate wireframe')
+      // Notify parent component of failure
+      onWireframeGenerated?.({ 
+        success: false, 
+        error: err instanceof Error ? err.message : 'Unknown error',
+        prompt,
+        device: device || selectedDevice || 'desktop',
+        timestamp: new Date().toISOString()
+      })
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  useEffect(() => {
+    const onGenerate = (e: Event) => {
+      const ce = e as CustomEvent<{ prompt: string; device?: string }>
+      if (typeof ce.detail?.prompt === "string") {
+        console.log('DEBUG: Event listener onGenerate called with device:', ce.detail.device, 'selectedDevice:', selectedDevice)
+        void generateFromPrompt(ce.detail.prompt, ce.detail.device)
+      }
+    }
+    const onClear = () => {
+      handleClear()
+    }
+    
+    // Add keyboard shortcuts
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.ctrlKey || e.metaKey) {
+        switch (e.key) {
+          case 's':
+          case 'S':
+            e.preventDefault()
+            if (editorRef.current) {
+              void saveWireframe(editorRef.current, false)
+            }
+            break
+          case 'k':
+          case 'K':
+            e.preventDefault()
+            // Could trigger a prompt input modal
+            break
+          case 'Backspace':
+          case 'Delete':
+            e.preventDefault()
+            handleClear()
+            break
+        }
+      }
+    }
+    
+    window.addEventListener("tldraw:generate", onGenerate as EventListener)
+    window.addEventListener("tldraw:clear", onClear as EventListener)
+    window.addEventListener("keydown", onKeyDown)
+    
+    return () => {
+      window.removeEventListener("tldraw:generate", onGenerate as EventListener)
+      window.removeEventListener("tldraw:clear", onClear as EventListener)
+      window.removeEventListener("keydown", onKeyDown)
+    }
+  }, [selectedDevice]) // Include selectedDevice in dependencies
+
+  // Auto-save effect
+  useEffect(() => {
+    if (!autoSaveEnabled || !editorRef.current) return
+    
+    const autoSaveInterval = setInterval(() => {
+      if (editorRef.current) {
+        console.log('DEBUG: Auto-save triggered with device type:', selectedDevice)
+        void saveWireframe(editorRef.current, true)
+      }
+    }, 30000) // Auto-save every 30 seconds
+    
+    return () => clearInterval(autoSaveInterval)
+  }, [autoSaveEnabled, selectedDevice]) // Include selectedDevice in dependencies
+
+  // Load wireframe on mount if user is authenticated
+  useEffect(() => {
+    if (isAuthenticated && user?.id) {
+      // Try to load the most recent wireframe for this user
+      const loadRecentWireframe = async () => {
+        try {
+          const response = await fetch(getWireframeUrl() + `/user/${user.id}`, {
+            headers: {
+              'Content-Type': 'application/json',
+              ...(getAccessToken() ? { 'Authorization': `Bearer ${getAccessToken()}` } : {}),
+            }
+          })
+          
+          if (response.ok) {
+            const data = await response.json()
+            if (data.wireframes && data.wireframes.length > 0) {
+              // Load the most recent wireframe
+              const mostRecent = data.wireframes[0] // Assuming they're sorted by created_at desc
+              await loadWireframe(mostRecent.id)
+            }
+          }
+        } catch (error) {
+          console.log('No recent wireframes to load or error loading:', error)
+        }
+      }
+      
+      loadRecentWireframe()
+    }
+  }, [isAuthenticated, user?.id])
+
+  // Debug: Log when selectedDevice prop changes
+  useEffect(() => {
+    console.log('DEBUG: WireframeCanvas selectedDevice prop changed to:', selectedDevice)
+  }, [selectedDevice])
+
+  return (
+    <div className={cn("relative h-full w-full flex flex-col", className)}>
+      {error && (
+        <div className="absolute top-4 left-4 right-4 z-50 bg-red-50 border border-red-200 rounded-lg p-3 shadow-lg">
+          <div className="flex items-center gap-2">
+            <span className="text-red-600 text-sm font-medium">⚠️ {error}</span>
+            <button 
+              onClick={() => setError(null)}
+              className="ml-auto text-red-400 hover:text-red-600 transition-colors duration-200 text-lg leading-none"
+              aria-label="Close error"
+            >
+              ×
+            </button>
+          </div>
+        </div>
+      )}
+      
+      {busy && (
+        <div className="absolute top-4 left-4 right-4 z-50 bg-blue-50 border border-blue-200 rounded-lg p-3 shadow-lg">
+          <div className="flex items-center gap-2">
+            <div className="animate-spin w-4 h-4 border-2 border-blue-600 border-t-transparent rounded-full"></div>
+            <span className="text-blue-600 text-sm font-medium">Generating wireframe with AI...</span>
+          </div>
+        </div>
+      )}
+      
+      {/* Save Status and Controls */}
+      <div className="absolute top-10 left-4 z-50 flex items-center gap-2">
+        {lastSaved && (
+          <div className="bg-green-50 border border-green-200 rounded-lg px-3 py-2 text-xs text-green-600">
+            Last saved: {lastSaved.toLocaleTimeString()}
+          </div>
+        )}
+        
+        {/* Authentication Status */}
+        {isAuthenticated ? (
+          <div className="bg-white border border-gray-200 rounded-lg px-3 py-2 flex items-center gap-2">
+            <div className="flex items-center gap-2 text-xs text-gray-600">
+              <span className="w-2 h-2 bg-green-500 rounded-full"></span>
+              Logged in as: {user?.username || 'User'}
+            </div>
+            
+            <label className="flex items-center gap-2 text-xs text-gray-600">
+              <input
+                type="checkbox"
+                checked={autoSaveEnabled}
+                onChange={(e) => setAutoSaveEnabled(e.target.checked)}
+                className="w-3 h-3"
+              />
+              Auto-save
+            </label>
+            
+            <button
+              onClick={() => editorRef.current && saveWireframe(editorRef.current, false)}
+              className="bg-blue-500 hover:bg-blue-600 text-white text-xs px-2 py-1 rounded transition-colors"
+              title="Save wireframe (Ctrl+S)"
+            >
+              Save
+            </button>
+          </div>
+        ) : (
+          <div className="bg-yellow-50 border border-yellow-200 rounded-lg px-3 py-2 text-xs text-yellow-600 flex items-center gap-2">
+            <span>⚠️ Please log in to save wireframes</span>
+            <a 
+              href="/signin" 
+              className="bg-yellow-500 hover:bg-yellow-600 text-white px-2 py-1 rounded transition-colors text-xs"
+            >
+              Sign In
+            </a>
+          </div>
+        )}
+      </div>
+      
+      <div className="flex-1 min-h-0">
+        <Tldraw onMount={handleMount} />
+      </div>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/src/contexts/auth-context.tsx b/src/contexts/auth-context.tsx
index 4f7018b..9b338e9 100644
--- a/src/contexts/auth-context.tsx
+++ b/src/contexts/auth-context.tsx
@@ -1,4 +1,4 @@
-"use client"
+'use client'
 
 import React, { createContext, useContext, useEffect, useState } from 'react'
 import { safeLocalStorage } from '@/lib/utils'
diff --git a/src/lib/config.ts b/src/lib/config.ts
new file mode 100644
index 0000000..4085270
--- /dev/null
+++ b/src/lib/config.ts
@@ -0,0 +1,137 @@
+// Configuration for the wireframe generator
+export const config = {
+  // Backend API configuration
+  backend: {
+    baseUrl: process.env.NEXT_PUBLIC_BACKEND_URL || 'http://localhost:8021',
+    endpoints: {
+      health: '/health',
+      generateWireframe: '/generate-wireframe',
+      generateWireframeDesktop: '/generate-wireframe/desktop',
+      generateWireframeTablet: '/generate-wireframe/tablet',
+      generateWireframeMobile: '/generate-wireframe/mobile',
+      generateAllDevices: '/generate-all-devices',
+      wireframes: '/api/wireframes',
+      wireframe: (id?: string) => id ? `/api/wireframes/${id}` : '/api/wireframes',
+    },
+    timeout: 30000, // 30 seconds
+  },
+  
+  // User Authentication Service
+  auth: {
+    baseUrl: process.env.NEXT_PUBLIC_AUTH_URL || 'http://localhost:8011',
+    endpoints: {
+      health: '/health',
+      register: '/api/auth/register',
+      login: '/api/auth/login',
+      logout: '/api/auth/logout',
+      refresh: '/api/auth/refresh',
+      profile: '/api/auth/me',
+      preferences: '/api/auth/preferences',
+      projects: '/api/auth/projects',
+    },
+    tokenKey: 'auth_token',
+    refreshTokenKey: 'refresh_token',
+  },
+  
+  // UI configuration
+  ui: {
+    maxPromptLength: 1000,
+    statusCheckInterval: 10000, // 10 seconds
+    generationTimeout: 30000, // 30 seconds
+  },
+  
+  // Wireframe defaults
+  wireframe: {
+    defaultPageSize: { width: 1200, height: 800 },
+    defaultSpacing: { gap: 16, padding: 20 },
+    minElementSize: { width: 80, height: 40 },
+  },
+} as const
+
+// Helper function to get full API URL
+export const getApiUrl = (endpoint: string): string => {
+  return `${config.backend.baseUrl}${endpoint}`
+}
+
+// Helper function to get full Auth Service URL
+export const getAuthUrl = (endpoint: string): string => {
+  return `${config.auth.baseUrl}${endpoint}`
+}
+
+// Helper function to get health check URL
+export const getHealthUrl = (): string => {
+  return getApiUrl(config.backend.endpoints.health)
+}
+
+// Helper function to get auth health check URL
+export const getAuthHealthUrl = (): string => {
+  return getAuthUrl(config.auth.endpoints.health)
+}
+
+// Helper function to get wireframe generation URL for specific device
+export const getWireframeGenerationUrl = (device: 'desktop' | 'tablet' | 'mobile' = 'desktop'): string => {
+  switch (device) {
+    case 'tablet':
+      return getApiUrl(config.backend.endpoints.generateWireframeTablet)
+    case 'mobile':
+      return getApiUrl(config.backend.endpoints.generateWireframeMobile)
+    case 'desktop':
+    default:
+      return getApiUrl(config.backend.endpoints.generateWireframeDesktop)
+  }
+}
+
+// Helper function to get universal wireframe generation URL (backward compatibility)
+export const getUniversalWireframeGenerationUrl = (): string => {
+  return getApiUrl(config.backend.endpoints.generateWireframe)
+}
+
+// Helper function to get all devices generation URL
+export const getAllDevicesGenerationUrl = (): string => {
+  return getApiUrl(config.backend.endpoints.generateAllDevices)
+}
+
+// Helper function to get wireframe persistence URLs
+export const getWireframeUrl = (id?: string): string => {
+  if (id) {
+    return getApiUrl(config.backend.endpoints.wireframe(id))
+  }
+  return getApiUrl(config.backend.endpoints.wireframes)
+}
+
+// Helper function to get wireframe by ID URL
+export const getWireframeByIdUrl = (id: string): string => {
+  return getApiUrl(config.backend.endpoints.wireframe(id))
+}
+
+// Authentication helper functions
+export const getAuthHeaders = (): HeadersInit => {
+  const token = localStorage.getItem(config.auth.tokenKey)
+  return token ? { 'Authorization': `Bearer ${token}` } : {}
+}
+
+export const getAuthHeadersWithContentType = (): HeadersInit => {
+  const token = localStorage.getItem(config.auth.tokenKey)
+  return {
+    'Content-Type': 'application/json',
+    ...(token ? { 'Authorization': `Bearer ${token}` } : {})
+  }
+}
+
+export const isAuthenticated = (): boolean => {
+  const token = localStorage.getItem(config.auth.tokenKey)
+  return !!token
+}
+
+export const getCurrentUser = (): any => {
+  try {
+    const token = localStorage.getItem(config.auth.tokenKey)
+    if (!token) return null
+    
+    // Decode JWT token to get user info
+    const payload = JSON.parse(atob(token.split('.')[1]))
+    return payload
+  } catch {
+    return null
+  }
+}