feat: add base canva editor

Author: Kyle9410-Chen

package.json

@@ -24,6 +24,7 @@
 		"@fastify/static": "^9.0.0",
 		"@icons-pack/react-simple-icons": "^13.11.2",
 		"@nycu-sdc/core-system-sdk": "1.0.0",
+		"@pixi/react": "^8.0.5",
 		"@radix-ui/react-checkbox": "^1.3.3",
 		"@radix-ui/react-dialog": "^1.1.15",
 		"@radix-ui/react-dropdown-menu": "^2.1.16",
@@ -43,6 +44,7 @@
 		"lucide-react": "^0.562.0",
 		"lucide-static": "^0.574.0",
 		"marked": "^17.0.3",
+		"pixi.js": "^8.17.0",
 		"pnpm": "^10.30.0",
 		"react": "^19.2.4",
 		"react-dom": "^19.2.4",

pnpm-lock.yaml

@@ -1,54 +1,13 @@
-.header {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	flex-wrap: wrap;
-	margin-bottom: 0.5rem;
-}
-
-.description {
-	padding: 0;
-	padding-left: 1rem;
-	line-height: 1.5;
+.container {
+	position: relative;
+	overflow: hidden;
 }
 
-.flowContainer {
+.toolbar {
+	position: absolute;
 	display: flex;
-	justify-content: center;
-}
-
-.warnings {
-	margin-top: 1.5rem;
-	padding: 0.75rem 1rem;
+	top: 1rem;
+	left: 1rem;
 	border-radius: 0.5rem;
-	background: color-mix(in srgb, var(--orange) 10%, transparent);
-	border: 1px solid color-mix(in srgb, var(--orange) 40%, transparent);
-}
-
-.warningsTitle {
-	margin: 0 0 0.5rem;
-	font-weight: 600;
-	color: var(--orange);
-}
-
-.warnings ul {
-	margin: 0;
-	padding-left: 1.25rem;
-	display: flex;
-	flex-direction: column;
-	gap: 0.25rem;
-}
-
-.warningItem {
-	font-size: 0.85rem;
-	color: var(--foreground);
-	display: flex;
-	gap: 0.5rem;
-	align-items: baseline;
-}
-
-.warningNode {
-	font-weight: 600;
-	white-space: nowrap;
-	color: var(--orange);
+	background-color: var(--background-color-tertiary);
 }