feat(workspace): integrate persisted canvas, element editing and session renewal

src/components/canvas/material-node.tsx

@@ -2,10 +2,11 @@
 
 import { useContext, useRef } from "react";
 import { Handle, Position, type NodeProps } from "@xyflow/react";
-import { FileText, Image as ImageIcon, Plus, Type } from "lucide-react";
+import { FileText, Image as ImageIcon, Type } from "lucide-react";
 import { elementCapabilities } from "@/lib/canvas-elements";
 import { nodeDirections, type CanvasNode } from "@/lib/canvas";
-import { textAppearance } from "./text-appearance";
+import { NodeTitle } from "./node-title";
+import { CanvasTextEditor } from "./canvas-text-editor";
 import styles from "./canvas.module.css";
 import { TransformableNode, NodeEditing } from "./transformable-node";
 export { NodeEditing } from "./transformable-node";
@@ -20,16 +21,15 @@ export function MaterialNode(props: NodeProps<CanvasNode>) {
   const Icon = data.kind === "image" ? ImageIcon : data.kind === "script" ? FileText : Type;
   return (
     <TransformableNode {...props} className={`${styles.node} ${selected ? styles.selectedNode : ""}`}>
-      <header className={styles.nodeHeading}><Icon size={13} /><span>{data.title}</span></header>
+      <header className={styles.nodeHeading}><Icon size={13} /><NodeTitle id={id} title={data.title} selected={selected} /></header>
       <Handle type="target" position={Position.Left} className={styles.legacyHandle} isConnectable={false} />
       {data.kind === "image" ? <img className={styles.image} src={data.src} alt={data.title} draggable={false} referrerPolicy="no-referrer" /> : (
-        <textarea style={textAppearance(data)} className={`${styles.cardText} nodrag nowheel`} aria-label={data.title} placeholder={data.kind === "script" ? "写下你的脚本…" : "留住一个想法…"}
-          value={data.text} maxLength={100000} onFocus={editing.begin} onChange={(event) => editing.edit(id, event.target.value)} />
+        <CanvasTextEditor id={id} data={data} selected={selected} />
       )}
       <Handle type="source" position={Position.Right} className={styles.legacyHandle} isConnectable={false} />
       {nodeDirections.map((direction) => <Handle key={direction} id={direction} type="source" position={positions[direction]}
-        className={`${styles.centerHandle} ${selected ? styles.plusHandle : ""}`}
-        aria-label={selected ? `在${labels[direction]}添加或连接节点` : `从${labels[direction]}连接节点`} role="button" tabIndex={selected ? 0 : -1}
+        className={styles.centerHandle} isConnectableStart={selected}
+        aria-hidden={!selected} aria-label={`从${labels[direction]}连接节点`} role="button" tabIndex={selected ? 0 : -1}
         onPointerDown={(event) => { pointerStart.current = { x: event.clientX, y: event.clientY }; }}
         onClick={(event) => {
           event.stopPropagation();
@@ -37,7 +37,6 @@ export function MaterialNode(props: NodeProps<CanvasNode>) {
             editing.branch(id, direction, { x: event.clientX, y: event.clientY });
         }}
         onKeyDown={(event) => { if (selected && (event.key === "Enter" || event.key === " ")) { event.preventDefault(); event.stopPropagation(); const rect = event.currentTarget.getBoundingClientRect(); editing.branch(id, direction, { x: rect.x + rect.width / 2, y: rect.y + rect.height / 2 }); } }}>
-        <Plus size={16} strokeWidth={1.6} aria-hidden="true" />
       </Handle>)}
     </TransformableNode>
   );