script-build-and-framework-tmp/visualization/frontend/components/PhaseFrameNode.tsx

"use client";

import type { Node, NodeProps } from "@xyflow/react";
import type { FrameData } from "@/lib/flow";

export function PhaseFrameNode({ data }: NodeProps<Node<FrameData>>) {
  const frame = data.frame;
  return <section className={`phaseFrame tone-${frame.tone}`} aria-label={frame.title}>
    <div className="phaseLabel">
      <span>{frame.title}</span>
      <small>{frame.subtitle}</small>
    </div>
  </section>;
}