feat(canvas): fix rotation, clarify frame membership and load icons on demand

src/components/canvas/transformable-node.tsx

@@ -7,6 +7,7 @@ import { elementCapabilities, type TextStyle } from "@/lib/canvas-elements";
 import type { CanvasNode, NodeDirection } from "@/lib/canvas";
 import { resizeFromPointer, rotationFromPointer, type NodeTransform } from "@/lib/canvas-geometry";
 import { NodeStyleToolbar } from "./node-style-toolbar";
+import { MembershipBadge } from "./frame-feedback";
 import styles from "./canvas.module.css";
 
 export const NodeEditing = createContext({
@@ -74,6 +75,7 @@ export function TransformableNode(props: NodeProps<CanvasNode> & { children: Rea
       onLostPointerCapture={() => { gesture.current = null; }}
       style={{ width: width || (data.kind === "frame" ? 640 : data.kind === "plain-image" ? 320 : data.kind === "icon" ? 80 : plain ? 240 : 260), height: height || (data.kind === "frame" ? 400 : data.kind === "plain-image" ? 240 : data.kind === "icon" ? 80 : plain ? 72 : 200), transform: `rotate(${rotation}deg)` }}>
       {children}
+      {data.kind !== "frame" && <MembershipBadge id={id} frameId={data.frameId} selected={selected} />}
       {capabilities.resizable && <button type="button" className={`${styles.cornerResize} nodrag nopan`} tabIndex={rotating ? -1 : 0}
         aria-hidden={rotating} aria-label="拖动右下角调整大小" title="拖动调整大小"
         onPointerDown={(event) => start(event, "bottom-right")} onPointerMove={move} onPointerUp={finish} onPointerCancel={finish}>