feat(canvas): refine connections, text styles and icon editing

src/components/canvas/icon-node.tsx

@@ -0,0 +1,10 @@
+"use client";
+import type { NodeProps } from "@xyflow/react";
+import type { CanvasNode } from "@/lib/canvas";
+import { TransformableNode } from "./transformable-node";
+import { canvasIcon } from "./icon-catalog";
+import styles from "./canvas.module.css";
+export function IconNode(props: NodeProps<CanvasNode>) {
+  const Icon = canvasIcon(props.data.icon);
+  return <TransformableNode {...props}><div className={styles.iconContent} style={{ color: props.data.textStyle?.color || "#78523f", background: props.data.textStyle?.background || "transparent" }}><Icon aria-label={props.data.title} width="100%" height="100%" strokeWidth={1.5} /></div></TransformableNode>;
+}